Integração com o banco de dados
This commit is contained in:
luisfepsale
@@ -3,7 +3,7 @@ import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Mic, Play, Download, Trash2, Search } from "lucide-react";
|
||||
import { Mic, Download, Trash2, Search, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
@@ -13,33 +13,56 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
} from "@/components/ui/pagination";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { audioGenerationService, VOICE_OPTIONS, VoiceType } from "@/services/audioGeneration";
|
||||
|
||||
interface GeneratedAudio {
|
||||
id: string;
|
||||
text: string;
|
||||
voice: string;
|
||||
voiceLabel: string;
|
||||
audioUrl: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
import { audioGenerationService, VOICE_OPTIONS, VoiceType, AudioRecord } from "@/services/audioGeneration";
|
||||
|
||||
export const GenerationView = () => {
|
||||
const [textToSpeech, setTextToSpeech] = useState("");
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [selectedVoice, setSelectedVoice] = useState<VoiceType>("alloy");
|
||||
const [generatedAudio, setGeneratedAudio] = useState<GeneratedAudio | null>(null);
|
||||
const [audioHistory, setAudioHistory] = useState<GeneratedAudio[]>([]);
|
||||
const [lastGeneratedAudio, setLastGeneratedAudio] = useState<AudioRecord | null>(null);
|
||||
const [audioHistory, setAudioHistory] = useState<AudioRecord[]>([]);
|
||||
const [isLoadingAudios, setIsLoadingAudios] = useState(false);
|
||||
const [audioSearchQuery, setAudioSearchQuery] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
const savedAudios = localStorage.getItem('audioHistory');
|
||||
if (savedAudios) {
|
||||
setAudioHistory(JSON.parse(savedAudios));
|
||||
// Carrega áudios do banco de dados
|
||||
const loadAudios = async (page: number = currentPage, limit: number = perPage) => {
|
||||
setIsLoadingAudios(true);
|
||||
try {
|
||||
const fetchedAudios = await audioGenerationService.getAudios(undefined, page, limit);
|
||||
|
||||
// Garante que sempre seja um array
|
||||
if (Array.isArray(fetchedAudios)) {
|
||||
setAudioHistory(fetchedAudios);
|
||||
} else {
|
||||
console.warn('Resposta da API não é um array:', fetchedAudios);
|
||||
setAudioHistory([]);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao carregar áudios:', error);
|
||||
toast({
|
||||
title: "Erro ao carregar histórico",
|
||||
description: error.message || "Não foi possível carregar o histórico de áudios.",
|
||||
variant: "destructive",
|
||||
});
|
||||
setAudioHistory([]);
|
||||
} finally {
|
||||
setIsLoadingAudios(false);
|
||||
}
|
||||
}, []);
|
||||
};
|
||||
|
||||
// Carrega áudios ao montar e quando a paginação mudar
|
||||
useEffect(() => {
|
||||
loadAudios();
|
||||
}, [currentPage, perPage]);
|
||||
|
||||
const handleGenerateAudio = async () => {
|
||||
// Valida o texto antes de enviar
|
||||
@@ -66,20 +89,23 @@ export const GenerationView = () => {
|
||||
if (response.success) {
|
||||
console.log('URL do áudio gerado:', response.audio_url);
|
||||
|
||||
const audio: GeneratedAudio = {
|
||||
// Cria objeto do áudio recém-gerado para exibição imediata
|
||||
const newGeneratedAudio: AudioRecord = {
|
||||
id: response.audio_generation_id,
|
||||
text: response.message,
|
||||
user_email: '',
|
||||
estabelecimento_id: 0,
|
||||
input_text: response.message,
|
||||
model: 'tts-1',
|
||||
voice: selectedVoice,
|
||||
voiceLabel: VOICE_OPTIONS[selectedVoice].label,
|
||||
audioUrl: response.audio_url,
|
||||
timestamp: new Date(),
|
||||
audio_url: response.audio_url,
|
||||
duration_seconds: null,
|
||||
file_size: 0,
|
||||
cost_usd: '0',
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setGeneratedAudio(audio);
|
||||
|
||||
const newHistory = [audio, ...audioHistory].slice(0, 10);
|
||||
setAudioHistory(newHistory);
|
||||
localStorage.setItem('audioHistory', JSON.stringify(newHistory));
|
||||
// Salva o último áudio gerado para exibição
|
||||
setLastGeneratedAudio(newGeneratedAudio);
|
||||
|
||||
toast({
|
||||
title: "Áudio gerado com sucesso",
|
||||
@@ -88,6 +114,10 @@ export const GenerationView = () => {
|
||||
|
||||
// Limpa o campo de texto após sucesso
|
||||
setTextToSpeech("");
|
||||
|
||||
// Recarrega a lista de áudios (sem aguardar para não bloquear a UI)
|
||||
loadAudios(1, perPage);
|
||||
setCurrentPage(1);
|
||||
} else {
|
||||
throw new Error('Erro ao gerar áudio');
|
||||
}
|
||||
@@ -104,38 +134,65 @@ export const GenerationView = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadAudio = (audio: GeneratedAudio) => {
|
||||
const handleDownloadAudio = (audio: AudioRecord) => {
|
||||
const a = document.createElement('a');
|
||||
a.href = audio.audioUrl;
|
||||
a.download = `audio_${audio.voiceLabel}_${new Date(audio.timestamp).getTime()}.mp3`;
|
||||
a.href = audio.audio_url;
|
||||
a.download = `audio_${audio.voice}_${new Date(audio.created_at).getTime()}.mp3`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
|
||||
toast({
|
||||
title: "Download iniciado",
|
||||
description: "O arquivo de áudio está sendo baixado.",
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteAudio = (audioId: string) => {
|
||||
if (generatedAudio?.id === audioId) {
|
||||
setGeneratedAudio(null);
|
||||
const handleDeleteAudio = async (audioId: string) => {
|
||||
try {
|
||||
const result = await audioGenerationService.deleteAudio(audioId);
|
||||
|
||||
if (result.success) {
|
||||
toast({
|
||||
title: "Áudio removido",
|
||||
description: "O áudio foi removido com sucesso.",
|
||||
});
|
||||
|
||||
// Se o áudio deletado for o último gerado, limpa o preview
|
||||
if (lastGeneratedAudio && lastGeneratedAudio.id === audioId) {
|
||||
setLastGeneratedAudio(null);
|
||||
}
|
||||
|
||||
// Recarrega a lista de áudios
|
||||
await loadAudios();
|
||||
} else {
|
||||
throw new Error(result.message || 'Erro ao deletar áudio');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar áudio:', error);
|
||||
toast({
|
||||
title: "Erro ao remover",
|
||||
description: error.message || "Não foi possível remover o áudio.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
const newHistory = audioHistory.filter(a => a.id !== audioId);
|
||||
setAudioHistory(newHistory);
|
||||
localStorage.setItem('audioHistory', JSON.stringify(newHistory));
|
||||
|
||||
toast({
|
||||
title: "Áudio removido",
|
||||
description: "O áudio foi removido do histórico.",
|
||||
});
|
||||
};
|
||||
|
||||
const filteredAudios = audioHistory.filter(item =>
|
||||
item.voiceLabel.toLowerCase().includes(audioSearchQuery.toLowerCase()) ||
|
||||
item.text.toLowerCase().includes(audioSearchQuery.toLowerCase())
|
||||
);
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const handlePerPageChange = (value: string) => {
|
||||
setPerPage(parseInt(value));
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const filteredAudios = Array.isArray(audioHistory)
|
||||
? audioHistory.filter(item =>
|
||||
(VOICE_OPTIONS[item.voice]?.label || item.voice).toLowerCase().includes(audioSearchQuery.toLowerCase()) ||
|
||||
item.input_text.toLowerCase().includes(audioSearchQuery.toLowerCase())
|
||||
)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full pb-16 md:pb-0">
|
||||
@@ -222,30 +279,30 @@ export const GenerationView = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{generatedAudio && (
|
||||
{lastGeneratedAudio && (
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold">Áudio Gerado</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Voz: {generatedAudio.voiceLabel}
|
||||
Voz: {VOICE_OPTIONS[lastGeneratedAudio.voice]?.label || lastGeneratedAudio.voice}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-1"
|
||||
onClick={() => handleDownloadAudio(generatedAudio)}
|
||||
onClick={() => handleDownloadAudio(lastGeneratedAudio)}
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
Baixar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
className="gap-1"
|
||||
onClick={() => handleDeleteAudio(generatedAudio.id)}
|
||||
onClick={() => handleDeleteAudio(lastGeneratedAudio.id)}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
Excluir
|
||||
@@ -254,14 +311,14 @@ export const GenerationView = () => {
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/30 rounded-lg p-4">
|
||||
<p className="text-sm mb-3">{generatedAudio.text}</p>
|
||||
<p className="text-sm mb-3">{lastGeneratedAudio.input_text}</p>
|
||||
<audio
|
||||
key={generatedAudio.id}
|
||||
key={lastGeneratedAudio.id}
|
||||
controls
|
||||
className="w-full"
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={generatedAudio.audioUrl} type="audio/mpeg" />
|
||||
<source src={lastGeneratedAudio.audio_url} type="audio/mpeg" />
|
||||
Seu navegador não suporta o elemento de áudio.
|
||||
</audio>
|
||||
</div>
|
||||
@@ -269,16 +326,10 @@ export const GenerationView = () => {
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="space-y-6">
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Histórico de Áudios</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{audioHistory.length} {audioHistory.length === 1 ? 'item' : 'itens'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<TabsContent value="history" className="space-y-4">
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={audioSearchQuery}
|
||||
@@ -287,63 +338,131 @@ export const GenerationView = () => {
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredAudios.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Mic className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p>{audioSearchQuery ? 'Nenhum áudio encontrado' : 'Nenhum áudio no histórico'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filteredAudios.map((audio) => (
|
||||
<div key={audio.id} className="bg-muted/30 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium">Voz: {audio.voiceLabel}</h4>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(audio.timestamp).toLocaleDateString('pt-BR')} às{' '}
|
||||
{new Date(audio.timestamp).toLocaleTimeString('pt-BR')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDownloadAudio(audio)}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeleteAudio(audio.id)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{audio.text}
|
||||
</p>
|
||||
<audio
|
||||
key={audio.id}
|
||||
controls
|
||||
className="w-full"
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={audio.audioUrl} type="audio/mpeg" />
|
||||
</audio>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Select value={perPage.toString()} onValueChange={handlePerPageChange}>
|
||||
<SelectTrigger className="w-full md:w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-effect bg-popover border-border z-50">
|
||||
<SelectItem value="5">5 por página</SelectItem>
|
||||
<SelectItem value="10">10 por página</SelectItem>
|
||||
<SelectItem value="20">20 por página</SelectItem>
|
||||
<SelectItem value="50">50 por página</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoadingAudios ? (
|
||||
<div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4">
|
||||
<div className="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-muted-foreground">Carregando áudios...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{filteredAudios.length === 0 ? (
|
||||
<div className="glass-effect rounded-xl p-12 text-center">
|
||||
<Mic className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
|
||||
<p className="text-muted-foreground">
|
||||
{audioSearchQuery ? 'Nenhum áudio encontrado' : 'Nenhum áudio gerado ainda'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
{filteredAudios.map((audio) => (
|
||||
<div key={audio.id} className="glass-effect rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium">
|
||||
Voz: {VOICE_OPTIONS[audio.voice]?.label || audio.voice}
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(audio.created_at).toLocaleDateString('pt-BR')} às{' '}
|
||||
{new Date(audio.created_at).toLocaleTimeString('pt-BR')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDownloadAudio(audio)}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeleteAudio(audio.id)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{audio.input_text}
|
||||
</p>
|
||||
<audio
|
||||
key={audio.id}
|
||||
controls
|
||||
className="w-full"
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={audio.audio_url} type="audio/mpeg" />
|
||||
</audio>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{!audioSearchQuery && audioHistory.length >= perPage && (
|
||||
<div className="flex items-center justify-center gap-4 mt-6">
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="gap-1"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden md:inline">Anterior</span>
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
|
||||
<PaginationItem>
|
||||
<span className="text-sm text-muted-foreground px-4">
|
||||
Página {currentPage}
|
||||
</span>
|
||||
</PaginationItem>
|
||||
|
||||
<PaginationItem>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={audioHistory.length < perPage}
|
||||
className="gap-1"
|
||||
>
|
||||
<span className="hidden md:inline">Próxima</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -2,37 +2,67 @@ import { useState, useEffect } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Upload, Download, Trash2, FileAudio, Copy, Search } from "lucide-react";
|
||||
import { Upload, Download, Trash2, FileAudio, Copy, Search, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
} from "@/components/ui/pagination";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { transcriptionService } from "@/services/transcription";
|
||||
import { transcriptionService, TranscriptionRecord } 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
|
||||
|
||||
interface TranscriptionResult {
|
||||
id: string;
|
||||
fileName: string;
|
||||
text: string;
|
||||
timestamp: Date;
|
||||
audioUrl?: string;
|
||||
}
|
||||
|
||||
export const TranscriptionView = () => {
|
||||
const [isTranscribing, setIsTranscribing] = useState(false);
|
||||
const [transcriptionResult, setTranscriptionResult] = useState<TranscriptionResult | null>(null);
|
||||
const [lastTranscriptionResult, setLastTranscriptionResult] = useState<TranscriptionRecord | null>(null);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const [transcriptionHistory, setTranscriptionHistory] = useState<TranscriptionResult[]>([]);
|
||||
const [transcriptionHistory, setTranscriptionHistory] = useState<TranscriptionRecord[]>([]);
|
||||
const [isLoadingTranscriptions, setIsLoadingTranscriptions] = useState(false);
|
||||
const [transcriptionSearchQuery, setTranscriptionSearchQuery] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
const savedTranscriptions = localStorage.getItem('transcriptionHistory');
|
||||
if (savedTranscriptions) {
|
||||
setTranscriptionHistory(JSON.parse(savedTranscriptions));
|
||||
// Carrega transcrições do banco de dados
|
||||
const loadTranscriptions = async (page: number = currentPage, limit: number = perPage) => {
|
||||
setIsLoadingTranscriptions(true);
|
||||
try {
|
||||
const fetchedTranscriptions = await transcriptionService.getTranscriptions(undefined, page, limit);
|
||||
|
||||
// Garante que sempre seja um array
|
||||
if (Array.isArray(fetchedTranscriptions)) {
|
||||
setTranscriptionHistory(fetchedTranscriptions);
|
||||
} else {
|
||||
console.warn('Resposta da API não é um array:', fetchedTranscriptions);
|
||||
setTranscriptionHistory([]);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao carregar transcrições:', error);
|
||||
toast({
|
||||
title: "Erro ao carregar histórico",
|
||||
description: error.message || "Não foi possível carregar o histórico de transcrições.",
|
||||
variant: "destructive",
|
||||
});
|
||||
setTranscriptionHistory([]);
|
||||
} finally {
|
||||
setIsLoadingTranscriptions(false);
|
||||
}
|
||||
}, []);
|
||||
};
|
||||
|
||||
// Carrega transcrições ao montar e quando a paginação mudar
|
||||
useEffect(() => {
|
||||
loadTranscriptions();
|
||||
}, [currentPage, perPage]);
|
||||
|
||||
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
@@ -64,24 +94,31 @@ export const TranscriptionView = () => {
|
||||
|
||||
// Verifica se a transcrição foi bem-sucedida
|
||||
if (response.success) {
|
||||
const result: TranscriptionResult = {
|
||||
// Cria objeto da transcrição recém-gerada para exibição imediata
|
||||
const newTranscription: TranscriptionRecord = {
|
||||
id: response.transcription_id,
|
||||
fileName: file.name,
|
||||
text: response.message,
|
||||
timestamp: new Date(),
|
||||
audioUrl: response.audio_url,
|
||||
user_email: '',
|
||||
estabelecimento_id: 0,
|
||||
audio_file_name: file.name,
|
||||
audio_duration_seconds: 0,
|
||||
transcription_text: response.message,
|
||||
model: 'whisper-1',
|
||||
audio_url: response.audio_url,
|
||||
cost_usd: '0',
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setTranscriptionResult(result);
|
||||
|
||||
const newHistory = [result, ...transcriptionHistory].slice(0, 10);
|
||||
setTranscriptionHistory(newHistory);
|
||||
localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory));
|
||||
// Salva a última transcrição para exibição
|
||||
setLastTranscriptionResult(newTranscription);
|
||||
|
||||
toast({
|
||||
title: "Transcrição concluída",
|
||||
description: "Seu áudio foi transcrito com sucesso!",
|
||||
});
|
||||
|
||||
// Recarrega a lista de transcrições (sem aguardar para não bloquear a UI)
|
||||
loadTranscriptions(1, perPage);
|
||||
setCurrentPage(1);
|
||||
} else {
|
||||
throw new Error(response.message || 'Erro ao transcrever áudio');
|
||||
}
|
||||
@@ -99,52 +136,80 @@ export const TranscriptionView = () => {
|
||||
};
|
||||
|
||||
const handleDeleteTranscription = () => {
|
||||
setTranscriptionResult(null);
|
||||
setLastTranscriptionResult(null);
|
||||
setSelectedFile(null);
|
||||
};
|
||||
|
||||
const handleDeleteTranscriptionFromHistory = (transcriptionId: string) => {
|
||||
if (transcriptionResult?.id === transcriptionId) {
|
||||
setTranscriptionResult(null);
|
||||
}
|
||||
const newHistory = transcriptionHistory.filter(t => t.id !== transcriptionId);
|
||||
setTranscriptionHistory(newHistory);
|
||||
localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory));
|
||||
|
||||
toast({
|
||||
title: "Transcrição removida",
|
||||
description: "A transcrição foi removida do histórico.",
|
||||
});
|
||||
};
|
||||
const handleDeleteTranscriptionFromHistory = async (transcriptionId: string) => {
|
||||
try {
|
||||
const result = await transcriptionService.deleteTranscription(transcriptionId);
|
||||
|
||||
const handleCopyTranscription = () => {
|
||||
if (transcriptionResult) {
|
||||
navigator.clipboard.writeText(transcriptionResult.text);
|
||||
if (result.success) {
|
||||
toast({
|
||||
title: "Transcrição removida",
|
||||
description: "A transcrição foi removida com sucesso.",
|
||||
});
|
||||
|
||||
// Se a transcrição deletada for a última gerada, limpa o preview
|
||||
if (lastTranscriptionResult && lastTranscriptionResult.id === transcriptionId) {
|
||||
setLastTranscriptionResult(null);
|
||||
}
|
||||
|
||||
// Recarrega a lista de transcrições
|
||||
await loadTranscriptions();
|
||||
} else {
|
||||
throw new Error(result.message || 'Erro ao deletar transcrição');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar transcrição:', error);
|
||||
toast({
|
||||
title: "Texto copiado",
|
||||
description: "A transcrição foi copiada para a área de transferência",
|
||||
title: "Erro ao remover",
|
||||
description: error.message || "Não foi possível remover a transcrição.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadTranscription = () => {
|
||||
if (transcriptionResult) {
|
||||
const blob = new Blob([transcriptionResult.text], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `transcricao_${transcriptionResult.fileName}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
const handleCopyTranscription = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
toast({
|
||||
title: "Texto copiado",
|
||||
description: "A transcrição foi copiada para a área de transferência",
|
||||
});
|
||||
};
|
||||
|
||||
const filteredTranscriptions = transcriptionHistory.filter(item =>
|
||||
item.fileName.toLowerCase().includes(transcriptionSearchQuery.toLowerCase()) ||
|
||||
item.text.toLowerCase().includes(transcriptionSearchQuery.toLowerCase())
|
||||
);
|
||||
const handleDownloadTranscription = (transcription: TranscriptionRecord) => {
|
||||
const blob = new Blob([transcription.transcription_text], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `transcricao_${transcription.audio_file_name}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast({
|
||||
title: "Download iniciado",
|
||||
description: "O arquivo de transcrição está sendo baixado.",
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const handlePerPageChange = (value: string) => {
|
||||
setPerPage(parseInt(value));
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const filteredTranscriptions = Array.isArray(transcriptionHistory)
|
||||
? transcriptionHistory.filter(item =>
|
||||
item.audio_file_name.toLowerCase().includes(transcriptionSearchQuery.toLowerCase()) ||
|
||||
item.transcription_text.toLowerCase().includes(transcriptionSearchQuery.toLowerCase())
|
||||
)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full pb-16 md:pb-0">
|
||||
@@ -198,7 +263,7 @@ export const TranscriptionView = () => {
|
||||
{selectedFile ? selectedFile.name : "Clique para selecionar ou arraste o arquivo"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{selectedFile
|
||||
{selectedFile
|
||||
? `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`
|
||||
: "Máximo 25 MB"
|
||||
}
|
||||
@@ -222,37 +287,37 @@ export const TranscriptionView = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{transcriptionResult && (
|
||||
{lastTranscriptionResult && (
|
||||
<div className="glass-effect rounded-xl p-6 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold">{transcriptionResult.fileName}</h4>
|
||||
<h4 className="font-semibold">{lastTranscriptionResult.audio_file_name}</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Transcrito {new Date(transcriptionResult.timestamp).toLocaleTimeString('pt-BR')}
|
||||
Transcrito {new Date(lastTranscriptionResult.created_at).toLocaleTimeString('pt-BR')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-1"
|
||||
onClick={handleCopyTranscription}
|
||||
onClick={() => handleCopyTranscription(lastTranscriptionResult.transcription_text)}
|
||||
>
|
||||
<Copy className="w-3 h-3" />
|
||||
Copiar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-1"
|
||||
onClick={handleDownloadTranscription}
|
||||
onClick={() => handleDownloadTranscription(lastTranscriptionResult)}
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
Baixar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
className="gap-1"
|
||||
onClick={handleDeleteTranscription}
|
||||
>
|
||||
@@ -263,23 +328,17 @@ export const TranscriptionView = () => {
|
||||
</div>
|
||||
<div className="bg-muted/30 rounded-lg p-4">
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{transcriptionResult.text}
|
||||
{lastTranscriptionResult.transcription_text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="space-y-6">
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Histórico de Transcrições</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{transcriptionHistory.length} {transcriptionHistory.length === 1 ? 'item' : 'itens'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<TabsContent value="history" className="space-y-4">
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={transcriptionSearchQuery}
|
||||
@@ -288,44 +347,126 @@ export const TranscriptionView = () => {
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={perPage.toString()} onValueChange={handlePerPageChange}>
|
||||
<SelectTrigger className="w-full md:w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-effect bg-popover border-border z-50">
|
||||
<SelectItem value="5">5 por página</SelectItem>
|
||||
<SelectItem value="10">10 por página</SelectItem>
|
||||
<SelectItem value="20">20 por página</SelectItem>
|
||||
<SelectItem value="50">50 por página</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{filteredTranscriptions.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<FileAudio className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p>{transcriptionSearchQuery ? 'Nenhuma transcrição encontrada' : 'Nenhuma transcrição no histórico'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filteredTranscriptions.map((item) => (
|
||||
<div key={item.id} className="bg-muted/30 rounded-lg p-4 space-y-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium truncate">{item.fileName}</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(item.timestamp).toLocaleDateString('pt-BR')} às{' '}
|
||||
{new Date(item.timestamp).toLocaleTimeString('pt-BR')}
|
||||
{/* Loading State */}
|
||||
{isLoadingTranscriptions ? (
|
||||
<div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4">
|
||||
<div className="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-muted-foreground">Carregando transcrições...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{filteredTranscriptions.length === 0 ? (
|
||||
<div className="glass-effect rounded-xl p-12 text-center">
|
||||
<FileAudio className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
|
||||
<p className="text-muted-foreground">
|
||||
{transcriptionSearchQuery ? 'Nenhuma transcrição encontrada' : 'Nenhuma transcrição no histórico'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
{filteredTranscriptions.map((item) => (
|
||||
<div key={item.id} className="glass-effect rounded-lg p-4 space-y-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium truncate">{item.audio_file_name}</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(item.created_at).toLocaleDateString('pt-BR')} às{' '}
|
||||
{new Date(item.created_at).toLocaleTimeString('pt-BR')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleCopyTranscription(item.transcription_text)}
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDownloadTranscription(item)}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeleteTranscriptionFromHistory(item.id)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{item.transcription_text}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeleteTranscriptionFromHistory(item.id)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{item.text}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{!transcriptionSearchQuery && transcriptionHistory.length >= perPage && (
|
||||
<div className="flex items-center justify-center gap-4 mt-6">
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="gap-1"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden md:inline">Anterior</span>
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
|
||||
<PaginationItem>
|
||||
<span className="text-sm text-muted-foreground px-4">
|
||||
Página {currentPage}
|
||||
</span>
|
||||
</PaginationItem>
|
||||
|
||||
<PaginationItem>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={transcriptionHistory.length < perPage}
|
||||
className="gap-1"
|
||||
>
|
||||
<span className="hidden md:inline">Próxima</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
+165
-280
@@ -4,7 +4,7 @@ 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 { chatService, ChatRecord, FolderRecord } from "@/services/chat";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import {
|
||||
@@ -38,7 +38,7 @@ interface ChatSidebarProps {
|
||||
isCollapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
onNewChat: () => void;
|
||||
onSelectChat?: (chat: StoredChat) => void;
|
||||
onSelectChat?: (chat: ChatRecord) => void;
|
||||
currentChatId?: string;
|
||||
}
|
||||
|
||||
@@ -46,20 +46,19 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
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<StoredFolder | null>(null);
|
||||
const [deletingFolder, setDeletingFolder] = useState<StoredFolder | null>(null);
|
||||
const [deletingChat, setDeletingChat] = useState<StoredChat | null>(null);
|
||||
const [deletingFolder, setDeletingFolder] = useState<FolderRecord | null>(null);
|
||||
const [deletingChat, setDeletingChat] = useState<ChatRecord | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Estado carregado do localStorage via chatService
|
||||
const [chats, setChats] = useState<StoredChat[]>([]);
|
||||
const [folders, setFolders] = useState<StoredFolder[]>([]);
|
||||
// Estado carregado do banco de dados via chatService
|
||||
const [chats, setChats] = useState<ChatRecord[]>([]);
|
||||
const [folders, setFolders] = useState<FolderRecord[]>([]);
|
||||
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
||||
|
||||
// Carrega chats e pastas do localStorage quando o componente monta
|
||||
// Carrega chats e pastas do banco de dados quando o componente monta
|
||||
useEffect(() => {
|
||||
loadChatsAndFolders();
|
||||
|
||||
@@ -76,28 +75,39 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadChatsAndFolders = () => {
|
||||
const loadedChats = chatService.getAllChats();
|
||||
const loadedFolders = chatService.getAllFolders();
|
||||
const loadChatsAndFolders = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await chatService.getChatsAndFolders();
|
||||
|
||||
setChats(loadedChats);
|
||||
setFolders(loadedFolders);
|
||||
console.log('Dados carregados:', data);
|
||||
|
||||
// Expande todas as pastas por padrão
|
||||
setExpandedFolders(new Set(loadedFolders.map(f => f.id)));
|
||||
setChats(data.chats);
|
||||
setFolders(data.folders);
|
||||
|
||||
// Expande todas as pastas por padrão
|
||||
setExpandedFolders(new Set(data.folders.map(f => f.id)));
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao carregar chats e pastas:', error);
|
||||
toast({
|
||||
title: "Erro ao carregar dados",
|
||||
description: error.message || "Não foi possível carregar chats e pastas.",
|
||||
variant: "destructive",
|
||||
});
|
||||
|
||||
// Define arrays vazios em caso de erro
|
||||
setChats([]);
|
||||
setFolders([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateFolder = () => {
|
||||
const handleCreateFolder = async () => {
|
||||
if (newFolderName.trim()) {
|
||||
try {
|
||||
const newFolder: StoredFolder = {
|
||||
id: chatService.generateChatId(), // Usa mesmo gerador de ID
|
||||
name: newFolderName,
|
||||
createdAt: new Date(),
|
||||
chatIds: [],
|
||||
};
|
||||
chatService.saveFolder(newFolder);
|
||||
loadChatsAndFolders();
|
||||
await chatService.createFolder(newFolderName);
|
||||
await loadChatsAndFolders();
|
||||
setNewFolderName("");
|
||||
setIsCreateFolderOpen(false);
|
||||
|
||||
@@ -105,82 +115,41 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
title: "Pasta criada",
|
||||
description: `Pasta "${newFolderName}" criada com sucesso.`,
|
||||
});
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao criar pasta:', error);
|
||||
toast({
|
||||
title: "Erro ao criar pasta",
|
||||
description: "Não foi possível criar a pasta. Tente novamente.",
|
||||
description: error.message || "Não foi possível criar a pasta. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditFolder = () => {
|
||||
if (editingFolder && newFolderName.trim()) {
|
||||
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 = () => {
|
||||
const handleDeleteFolder = async () => {
|
||||
if (deletingFolder) {
|
||||
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();
|
||||
await chatService.deleteFolder(deletingFolder.id);
|
||||
await loadChatsAndFolders();
|
||||
setDeletingFolder(null);
|
||||
setIsDeleteFolderOpen(false);
|
||||
|
||||
toast({
|
||||
title: "Pasta excluída",
|
||||
description: "As conversas foram movidas para 'Sem Pasta'.",
|
||||
description: "A pasta foi excluída com sucesso.",
|
||||
});
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao excluir pasta:', error);
|
||||
toast({
|
||||
title: "Erro ao excluir pasta",
|
||||
description: "Não foi possível excluir a pasta. Tente novamente.",
|
||||
description: error.message || "Não foi possível excluir a pasta. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openEditFolder = (folder: StoredFolder) => {
|
||||
setEditingFolder(folder);
|
||||
setNewFolderName(folder.name);
|
||||
setIsEditFolderOpen(true);
|
||||
};
|
||||
|
||||
const openDeleteFolder = (folder: StoredFolder) => {
|
||||
const openDeleteFolder = (folder: FolderRecord) => {
|
||||
setDeletingFolder(folder);
|
||||
setIsDeleteFolderOpen(true);
|
||||
};
|
||||
@@ -195,62 +164,31 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
setExpandedFolders(newExpanded);
|
||||
};
|
||||
|
||||
const moveToFolder = (chatId: string, folderId: string) => {
|
||||
const moveToFolder = async (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();
|
||||
await chatService.moveChatToFolder(chatId, folderId);
|
||||
await loadChatsAndFolders();
|
||||
|
||||
const folder = folders.find(f => f.id === folderId);
|
||||
toast({
|
||||
title: "Chat movido",
|
||||
description: `Movido para a pasta "${folder?.name}".`,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
const folder = folders.find(f => f.id === folderId);
|
||||
toast({
|
||||
title: "Chat movido",
|
||||
description: `Movido para a pasta "${folder?.name}".`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao mover chat:', error);
|
||||
toast({
|
||||
title: "Erro ao mover chat",
|
||||
description: "Não foi possível mover o chat. Tente novamente.",
|
||||
description: error.message || "Não foi possível mover o chat. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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 handleDeleteChat = () => {
|
||||
const handleDeleteChat = async () => {
|
||||
if (deletingChat) {
|
||||
try {
|
||||
chatService.deleteChat(deletingChat.id);
|
||||
loadChatsAndFolders();
|
||||
await chatService.deleteChat(deletingChat.id);
|
||||
await loadChatsAndFolders();
|
||||
setDeletingChat(null);
|
||||
setIsDeleteChatOpen(false);
|
||||
|
||||
@@ -258,22 +196,23 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
title: "Chat excluído",
|
||||
description: "A conversa foi excluída com sucesso.",
|
||||
});
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao excluir chat:', error);
|
||||
toast({
|
||||
title: "Erro ao excluir chat",
|
||||
description: "Não foi possível excluir o chat. Tente novamente.",
|
||||
description: error.message || "Não foi possível excluir o chat. Tente novamente.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openDeleteChat = (chat: StoredChat) => {
|
||||
const openDeleteChat = (chat: ChatRecord) => {
|
||||
setDeletingChat(chat);
|
||||
setIsDeleteChatOpen(true);
|
||||
};
|
||||
|
||||
const handleSelectChat = (chat: StoredChat) => {
|
||||
const handleSelectChat = (chat: ChatRecord) => {
|
||||
if (onSelectChat) {
|
||||
onSelectChat(chat);
|
||||
}
|
||||
@@ -283,20 +222,17 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
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;
|
||||
return titleMatch;
|
||||
});
|
||||
|
||||
// Separar chats sem pasta
|
||||
const chatsWithoutFolder = filteredChats.filter((c) => !c.folderId);
|
||||
// Separar chats sem pasta (folder_id é null)
|
||||
const chatsWithoutFolder = filteredChats.filter((c) => c.folder_id === null);
|
||||
|
||||
// Agrupar chats por pasta
|
||||
// Agrupar chats por pasta (quando folder_id === folder.id)
|
||||
const chatsByFolder = folders.reduce((acc, folder) => {
|
||||
acc[folder.id] = filteredChats.filter((c) => c.folderId === folder.id);
|
||||
acc[folder.id] = filteredChats.filter((c) => c.folder_id === folder.id);
|
||||
return acc;
|
||||
}, {} as Record<string, StoredChat[]>);
|
||||
}, {} as Record<string, ChatRecord[]>);
|
||||
|
||||
if (isCollapsed) {
|
||||
return (
|
||||
@@ -382,45 +318,13 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Folder Dialog */}
|
||||
<Dialog open={isEditFolderOpen} onOpenChange={setIsEditFolderOpen}>
|
||||
<DialogContent className="glass-effect bg-card border-border z-50">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Editar Pasta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Renomeie sua pasta de conversas.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-folder-name">Nome da Pasta</Label>
|
||||
<Input
|
||||
id="edit-folder-name"
|
||||
value={newFolderName}
|
||||
onChange={(e) => setNewFolderName(e.target.value)}
|
||||
placeholder="Digite o novo nome..."
|
||||
onKeyDown={(e) => e.key === "Enter" && handleEditFolder()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsEditFolderOpen(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleEditFolder} disabled={!newFolderName.trim()}>
|
||||
Salvar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Folder Alert */}
|
||||
<AlertDialog open={isDeleteFolderOpen} onOpenChange={setIsDeleteFolderOpen}>
|
||||
<AlertDialogContent className="glass-effect bg-card border-border z-50">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Excluir Pasta?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação não pode ser desfeita. As conversas dentro da pasta serão movidas para "Sem Pasta".
|
||||
Esta ação não pode ser desfeita. A pasta "{deletingFolder?.name}" será excluída.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
@@ -436,57 +340,78 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
{/* Conversations List */}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 space-y-1">
|
||||
{/* Folders */}
|
||||
{folders.map((folder) => (
|
||||
<div key={folder.id} className="space-y-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => toggleFolder(folder.id)}
|
||||
className="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors group"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
|
||||
<Folder className="w-4 h-4 text-white" />
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Folders */}
|
||||
{folders.map((folder) => (
|
||||
<div key={folder.id} className="space-y-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => toggleFolder(folder.id)}
|
||||
className="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors group"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
|
||||
<Folder className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="font-medium text-sm flex-1 text-left">
|
||||
{folder.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{chatsByFolder[folder.id]?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
|
||||
<DropdownMenuItem
|
||||
className="gap-2 text-destructive"
|
||||
onClick={() => openDeleteFolder(folder)}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
Excluir Pasta
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<span className="font-medium text-sm flex-1 text-left">
|
||||
{folder.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{chatsByFolder[folder.id]?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
|
||||
<DropdownMenuItem
|
||||
className="gap-2"
|
||||
onClick={() => openEditFolder(folder)}
|
||||
>
|
||||
<Edit className="w-3 h-3" />
|
||||
Editar Nome
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="gap-2 text-destructive"
|
||||
onClick={() => openDeleteFolder(folder)}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
Excluir Pasta
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{expandedFolders.has(folder.id) && chatsByFolder[folder.id]?.length > 0 && (
|
||||
<div className="ml-6 space-y-1">
|
||||
{chatsByFolder[folder.id].map((chat) => (
|
||||
<ChatItem
|
||||
key={chat.id}
|
||||
chat={chat}
|
||||
isSelected={currentChatId === chat.id}
|
||||
onSelect={() => handleSelectChat(chat)}
|
||||
folders={folders}
|
||||
onMoveToFolder={moveToFolder}
|
||||
onDelete={() => openDeleteChat(chat)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{expandedFolders.has(folder.id) && chatsByFolder[folder.id]?.length > 0 && (
|
||||
<div className="ml-6 space-y-1">
|
||||
{chatsByFolder[folder.id].map((chat) => (
|
||||
{/* 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>
|
||||
{chatsWithoutFolder.map((chat) => (
|
||||
<ChatItem
|
||||
key={chat.id}
|
||||
chat={chat}
|
||||
@@ -494,34 +419,25 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
onSelect={() => handleSelectChat(chat)}
|
||||
folders={folders}
|
||||
onMoveToFolder={moveToFolder}
|
||||
onRemoveFromFolder={removeFromFolder}
|
||||
onDelete={() => openDeleteChat(chat)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 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>
|
||||
{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>
|
||||
{/* Empty state */}
|
||||
{!isLoading && chats.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center">
|
||||
<MessageSquare className="w-12 h-12 text-muted-foreground opacity-50 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhuma conversa ainda
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Clique em "Novo Chat" para começar
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
@@ -548,12 +464,11 @@ export const ChatSidebar = ({ isCollapsed, onToggleCollapse, onNewChat, onSelect
|
||||
};
|
||||
|
||||
interface ChatItemProps {
|
||||
chat: StoredChat;
|
||||
chat: ChatRecord;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
folders: StoredFolder[];
|
||||
folders: FolderRecord[];
|
||||
onMoveToFolder: (chatId: string, folderId: string) => void;
|
||||
onRemoveFromFolder: (chatId: string) => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
@@ -563,50 +478,29 @@ const ChatItem = ({
|
||||
onSelect,
|
||||
folders,
|
||||
onMoveToFolder,
|
||||
onRemoveFromFolder,
|
||||
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), {
|
||||
const timeAgo = formatDistanceToNow(new Date(chat.updated_at), {
|
||||
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 ${
|
||||
className={`group flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all w-full ${
|
||||
isSelected
|
||||
? "bg-sidebar-accent cyber-border"
|
||||
: "hover:bg-muted/50"
|
||||
}`}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0 overflow-hidden">
|
||||
<MessageSquare className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0 max-w-[180px]">
|
||||
<p className="text-sm font-medium truncate" title={chat.title}>
|
||||
{truncatedTitle}
|
||||
{chat.title}
|
||||
</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">
|
||||
<p className="text-xs text-muted-foreground truncate" title={timeAgo}>
|
||||
{timeAgo}
|
||||
</p>
|
||||
</div>
|
||||
@@ -622,17 +516,8 @@ const ChatItem = ({
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="glass-effect bg-popover border-border z-50">
|
||||
{chat.folderId && (
|
||||
<DropdownMenuItem
|
||||
className="gap-2"
|
||||
onClick={() => onRemoveFromFolder(chat.id)}
|
||||
>
|
||||
<FolderInput className="w-3 h-3" />
|
||||
Remover da Pasta
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
|
||||
{folders.map((folder) => (
|
||||
{/* Opções para mover para pastas */}
|
||||
{folders.filter(f => f.id !== chat.folder_id).map((folder) => (
|
||||
<DropdownMenuItem
|
||||
key={folder.id}
|
||||
className="gap-2"
|
||||
|
||||
@@ -4,7 +4,7 @@ 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 { chatService, ChatRecord, MessageRecord } from "@/services/chat";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { getModelId } from "@/config/models";
|
||||
|
||||
@@ -38,40 +38,38 @@ export const ChatView = () => {
|
||||
|
||||
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]);
|
||||
// NOTA: Salvamento automático desabilitado - mensagens já são salvas na API
|
||||
// quando enviadas via handleSendMessage
|
||||
// useEffect(() => {
|
||||
// if (messages.length > 1) {
|
||||
// saveCurrentChat();
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
// NOTA: Função de salvamento localStorage desabilitada - migrado para banco de dados
|
||||
// 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 = () => {
|
||||
// Reseta para "0" - novo chat sempre começa com chat_id "0"
|
||||
@@ -89,22 +87,56 @@ export const ChatView = () => {
|
||||
window.dispatchEvent(new Event('chatUpdated'));
|
||||
};
|
||||
|
||||
const handleLoadChat = (chat: StoredChat) => {
|
||||
// Carrega um chat existente do histórico
|
||||
const handleLoadChat = async (chat: ChatRecord) => {
|
||||
// Carrega um chat existente do banco de dados
|
||||
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,
|
||||
}));
|
||||
// Limpa mensagens enquanto carrega
|
||||
setMessages([]);
|
||||
setIsLoading(true);
|
||||
|
||||
setMessages(loadedMessages);
|
||||
try {
|
||||
// Busca mensagens do chat na API
|
||||
const messagesFromAPI = await chatService.getChatMessages(chat.id);
|
||||
|
||||
console.log('Mensagens carregadas da API:', messagesFromAPI);
|
||||
|
||||
// Converte MessageRecord para Message
|
||||
const loadedMessages: Message[] = messagesFromAPI.map((msg: MessageRecord) => ({
|
||||
id: msg.id,
|
||||
role: msg.role,
|
||||
content: msg.content,
|
||||
model: undefined, // model_id vem como número, não temos mapeamento reverso
|
||||
attachments: msg.has_attachments ? [] : undefined, // Não temos detalhes dos anexos no GET
|
||||
}));
|
||||
|
||||
setMessages(loadedMessages);
|
||||
|
||||
toast({
|
||||
title: "Chat carregado",
|
||||
description: `${loadedMessages.length} mensagens carregadas.`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao carregar mensagens:', error);
|
||||
|
||||
toast({
|
||||
title: "Erro ao carregar chat",
|
||||
description: error.message || "Não foi possível carregar as mensagens.",
|
||||
variant: "destructive",
|
||||
});
|
||||
|
||||
// Inicia com mensagem padrão em caso de erro
|
||||
setMessages([
|
||||
{
|
||||
id: "1",
|
||||
role: "assistant",
|
||||
content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
|
||||
model: selectedModel,
|
||||
},
|
||||
]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendMessage = async (content: string, files?: File[]) => {
|
||||
@@ -142,7 +174,18 @@ export const ChatView = () => {
|
||||
// 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}`);
|
||||
|
||||
// Se estava com chat_id "0", significa que é a primeira mensagem
|
||||
// e o chat acabou de ser criado no backend
|
||||
const isFirstMessage = currentChatId === "0";
|
||||
|
||||
setCurrentChatId(response.chat_id);
|
||||
|
||||
// Dispara evento para ChatSidebar recarregar e mostrar o novo chat
|
||||
if (isFirstMessage) {
|
||||
console.log('Primeira mensagem - novo chat criado, atualizando sidebar');
|
||||
window.dispatchEvent(new Event('chatUpdated'));
|
||||
}
|
||||
}
|
||||
|
||||
const aiResponse: Message = {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Download, Trash2, Sparkles, Clock, Search } from "lucide-react";
|
||||
import { Download, Trash2, Sparkles, Clock, Search, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
@@ -14,41 +14,61 @@ import {
|
||||
} 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: ImageSize;
|
||||
timestamp: Date;
|
||||
}
|
||||
import {
|
||||
imageGenerationService,
|
||||
IMAGE_SIZE_OPTIONS,
|
||||
ImageSize,
|
||||
ImageRecord
|
||||
} from "@/services/imageGeneration";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
} from "@/components/ui/pagination";
|
||||
|
||||
export const ImageView = () => {
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [selectedSize, setSelectedSize] = useState<ImageSize>("1024x1024");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [images, setImages] = useState<GeneratedImage[]>([]);
|
||||
const [images, setImages] = useState<ImageRecord[]>([]);
|
||||
const [lastGeneratedImage, setLastGeneratedImage] = useState<ImageRecord | null>(null);
|
||||
const [isLoadingImages, setIsLoadingImages] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
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);
|
||||
// Carrega imagens do banco de dados ao montar o componente
|
||||
const loadImages = async (page: number = currentPage, limit: number = perPage) => {
|
||||
setIsLoadingImages(true);
|
||||
try {
|
||||
const fetchedImages = await imageGenerationService.getImages(undefined, page, limit);
|
||||
|
||||
// Garante que sempre seja um array
|
||||
if (Array.isArray(fetchedImages)) {
|
||||
setImages(fetchedImages);
|
||||
} else {
|
||||
console.warn('Resposta da API não é um array:', fetchedImages);
|
||||
setImages([]);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao carregar imagens:', error);
|
||||
toast({
|
||||
title: "Erro ao carregar histórico",
|
||||
description: error.message || "Não foi possível carregar o histórico de imagens.",
|
||||
variant: "destructive",
|
||||
});
|
||||
setImages([]);
|
||||
} finally {
|
||||
setIsLoadingImages(false);
|
||||
}
|
||||
}, []);
|
||||
};
|
||||
|
||||
// Carrega imagens ao montar e quando a paginação mudar
|
||||
useEffect(() => {
|
||||
loadImages();
|
||||
}, [currentPage, perPage]);
|
||||
|
||||
const handleGenerate = async () => {
|
||||
// Valida a descrição antes de enviar
|
||||
@@ -73,28 +93,36 @@ export const ImageView = () => {
|
||||
|
||||
// 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}`,
|
||||
});
|
||||
|
||||
// Cria objeto da imagem recém-gerada para exibição imediata
|
||||
const newGeneratedImage: ImageRecord = {
|
||||
id: response.image_generation_id,
|
||||
user_email: '', // Será preenchido pelo backend
|
||||
estabelecimento_id: 0, // Será preenchido pelo backend
|
||||
description: response.message, // Descrição original
|
||||
model: 'dall-e-3', // Modelo padrão
|
||||
image_url: response.image_url,
|
||||
size: selectedSize,
|
||||
cost_usd: '0',
|
||||
total_tokens: 0,
|
||||
input_tokens: 0,
|
||||
output_tokens: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Salva a última imagem gerada para exibição
|
||||
setLastGeneratedImage(newGeneratedImage);
|
||||
|
||||
// Limpa o campo de descrição após sucesso
|
||||
setPrompt("");
|
||||
|
||||
// Recarrega a lista de imagens (sem aguardar para não bloquear a UI)
|
||||
loadImages(1, perPage);
|
||||
setCurrentPage(1);
|
||||
} else {
|
||||
throw new Error('Erro ao gerar imagem');
|
||||
}
|
||||
@@ -111,22 +139,41 @@ export const ImageView = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
const newHistory = images.filter((img) => img.id !== id);
|
||||
setImages(newHistory);
|
||||
localStorage.setItem('imageHistory', JSON.stringify(newHistory));
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
const result = await imageGenerationService.deleteImage(id);
|
||||
|
||||
toast({
|
||||
title: "Imagem removida",
|
||||
description: "A imagem foi removida do histórico.",
|
||||
});
|
||||
if (result.success) {
|
||||
toast({
|
||||
title: "Imagem removida",
|
||||
description: "A imagem foi removida com sucesso.",
|
||||
});
|
||||
|
||||
// Se a imagem deletada for a última gerada, limpa o preview
|
||||
if (lastGeneratedImage && lastGeneratedImage.id === id) {
|
||||
setLastGeneratedImage(null);
|
||||
}
|
||||
|
||||
// Recarrega a lista de imagens
|
||||
await loadImages();
|
||||
} else {
|
||||
throw new Error(result.message || 'Erro ao deletar imagem');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar imagem:', error);
|
||||
toast({
|
||||
title: "Erro ao remover",
|
||||
description: error.message || "Não foi possível remover a imagem.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = async (image: GeneratedImage) => {
|
||||
const handleDownload = async (image: ImageRecord) => {
|
||||
try {
|
||||
await imageGenerationService.downloadImage(
|
||||
image.url,
|
||||
`${image.prompt.substring(0, 30)}_${image.size}.png`
|
||||
image.image_url,
|
||||
`${image.description.substring(0, 30)}_${image.size}.png`
|
||||
);
|
||||
|
||||
toast({
|
||||
@@ -142,9 +189,20 @@ export const ImageView = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const filteredImages = images.filter((img) =>
|
||||
img.prompt.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const handlePerPageChange = (value: string) => {
|
||||
setPerPage(parseInt(value));
|
||||
setCurrentPage(1); // Reset para primeira página ao mudar itens por página
|
||||
};
|
||||
|
||||
const filteredImages = Array.isArray(images)
|
||||
? images.filter((img) =>
|
||||
img.description.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full pb-16 md:pb-0">
|
||||
@@ -227,11 +285,11 @@ export const ImageView = () => {
|
||||
)}
|
||||
|
||||
{/* Recent Images Preview */}
|
||||
{!isGenerating && images.length > 0 && (
|
||||
{!isGenerating && lastGeneratedImage && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Última Geração</h3>
|
||||
<ImageCard
|
||||
image={images[0]}
|
||||
image={lastGeneratedImage}
|
||||
onDelete={handleDelete}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
@@ -241,36 +299,102 @@ export const ImageView = () => {
|
||||
|
||||
{/* History Tab */}
|
||||
<TabsContent value="history" className="space-y-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Buscar por descrição..."
|
||||
className="pl-9"
|
||||
/>
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Buscar por descrição..."
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={perPage.toString()} onValueChange={handlePerPageChange}>
|
||||
<SelectTrigger className="w-full md:w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-effect bg-popover border-border z-50">
|
||||
<SelectItem value="5">5 por página</SelectItem>
|
||||
<SelectItem value="10">10 por página</SelectItem>
|
||||
<SelectItem value="20">20 por página</SelectItem>
|
||||
<SelectItem value="50">50 por página</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Images Grid */}
|
||||
{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}
|
||||
image={image}
|
||||
onDelete={handleDelete}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
))}
|
||||
{/* Loading State */}
|
||||
{isLoadingImages ? (
|
||||
<div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4">
|
||||
<div className="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-muted-foreground">Carregando imagens...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass-effect rounded-xl p-12 text-center">
|
||||
<Clock className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">
|
||||
{searchQuery ? "Nenhuma imagem encontrada" : "Nenhuma imagem gerada ainda"}
|
||||
</p>
|
||||
</div>
|
||||
<>
|
||||
{/* Images Grid */}
|
||||
{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}
|
||||
image={image}
|
||||
onDelete={handleDelete}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{!searchQuery && images.length >= perPage && (
|
||||
<div className="flex items-center justify-center gap-4 mt-6">
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="gap-1"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden md:inline">Anterior</span>
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
|
||||
<PaginationItem>
|
||||
<span className="text-sm text-muted-foreground px-4">
|
||||
Página {currentPage}
|
||||
</span>
|
||||
</PaginationItem>
|
||||
|
||||
<PaginationItem>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={images.length < perPage}
|
||||
className="gap-1"
|
||||
>
|
||||
<span className="hidden md:inline">Próxima</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="glass-effect rounded-xl p-12 text-center">
|
||||
<Clock className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">
|
||||
{searchQuery ? "Nenhuma imagem encontrada" : "Nenhuma imagem gerada ainda"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
@@ -282,9 +406,9 @@ export const ImageView = () => {
|
||||
};
|
||||
|
||||
interface ImageCardProps {
|
||||
image: GeneratedImage;
|
||||
image: ImageRecord;
|
||||
onDelete: (id: string) => void;
|
||||
onDownload: (image: GeneratedImage) => void;
|
||||
onDownload: (image: ImageRecord) => void;
|
||||
}
|
||||
|
||||
const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
@@ -292,9 +416,10 @@ const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
const [imageLoading, setImageLoading] = useState(true);
|
||||
|
||||
// Calcula tempo relativo
|
||||
const getRelativeTime = (timestamp: Date) => {
|
||||
const getRelativeTime = (timestamp: string) => {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - new Date(timestamp).getTime();
|
||||
const date = new Date(timestamp);
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
@@ -306,13 +431,13 @@ const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
};
|
||||
|
||||
const handleImageError = () => {
|
||||
console.warn('Erro CORS ao carregar imagem:', image.url);
|
||||
console.warn('Erro CORS ao carregar imagem:', image.image_url);
|
||||
setImageError(true);
|
||||
setImageLoading(false);
|
||||
};
|
||||
|
||||
const handleImageLoad = () => {
|
||||
console.log('Imagem carregada com sucesso:', image.url);
|
||||
console.log('Imagem carregada com sucesso:', image.image_url);
|
||||
setImageLoading(false);
|
||||
setImageError(false);
|
||||
};
|
||||
@@ -332,7 +457,7 @@ const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
<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}
|
||||
href={image.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"
|
||||
@@ -340,7 +465,7 @@ const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
Abrir imagem em nova aba
|
||||
</a>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(image.url)}
|
||||
onClick={() => navigator.clipboard.writeText(image.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
|
||||
@@ -349,8 +474,8 @@ const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={image.url}
|
||||
alt={image.prompt}
|
||||
src={image.image_url}
|
||||
alt={image.description}
|
||||
className="w-full h-full object-cover"
|
||||
onError={handleImageError}
|
||||
onLoad={handleImageLoad}
|
||||
@@ -360,10 +485,10 @@ const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
|
||||
)}
|
||||
<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>
|
||||
<p className="text-sm text-white line-clamp-2">{image.description}</p>
|
||||
<div className="flex items-center justify-between text-xs text-white/70">
|
||||
<span>{IMAGE_SIZE_OPTIONS[image.size].label}</span>
|
||||
<span>{getRelativeTime(image.timestamp)}</span>
|
||||
<span>{IMAGE_SIZE_OPTIONS[image.size as ImageSize]?.label || image.size}</span>
|
||||
<span>{getRelativeTime(image.created_at)}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
|
||||
@@ -16,6 +16,23 @@ export interface AudioGenerationResponse {
|
||||
message: string; // Texto que foi convertido em áudio
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para um áudio armazenado no banco de dados
|
||||
*/
|
||||
export interface AudioRecord {
|
||||
id: string;
|
||||
user_email: string;
|
||||
estabelecimento_id: number;
|
||||
input_text: string;
|
||||
model: string;
|
||||
voice: VoiceType;
|
||||
audio_url: string;
|
||||
duration_seconds: number | null;
|
||||
file_size: number;
|
||||
cost_usd: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para os dados necessários para geração de áudio
|
||||
*/
|
||||
@@ -73,6 +90,8 @@ export const VOICE_OPTIONS = {
|
||||
*/
|
||||
class AudioGenerationService {
|
||||
private readonly AUDIO_GENERATION_ENDPOINT = '/webhook/codex/gerar_audio';
|
||||
private readonly GET_AUDIOS_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/get_gerar_audios';
|
||||
private readonly DELETE_AUDIO_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/delete_gerar_audio';
|
||||
|
||||
/**
|
||||
* Gera um arquivo de áudio a partir de texto
|
||||
@@ -192,6 +211,149 @@ class AudioGenerationService {
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Lista áudios do banco de dados com paginação
|
||||
*
|
||||
* @param userEmail - Email do usuário
|
||||
* @param page - Número da página (padrão: 1)
|
||||
* @param perPage - Quantidade de itens por página (padrão: 10)
|
||||
* @returns Promise com o array de áudios
|
||||
*/
|
||||
async getAudios(
|
||||
userEmail?: string,
|
||||
page: number = 1,
|
||||
perPage: number = 10
|
||||
): Promise<AudioRecord[]> {
|
||||
// Usa valores do GlobalFunctions se não forem fornecidos
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Buscando áudios:', {
|
||||
userEmail: email,
|
||||
page,
|
||||
perPage,
|
||||
});
|
||||
|
||||
try {
|
||||
// Faz a requisição GET com parâmetros na URL e query
|
||||
const response = await apiService.get<AudioRecord[]>(
|
||||
`${this.GET_AUDIOS_ENDPOINT}/${email}`,
|
||||
{
|
||||
params: {
|
||||
page: page.toString(),
|
||||
per_page: perPage.toString(),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
console.log('Resposta completa da API:', response);
|
||||
console.log('response.data:', response.data);
|
||||
console.log('É array?:', Array.isArray(response.data));
|
||||
|
||||
// A API retorna diretamente o array de áudios
|
||||
// Garante que sempre retorna um array
|
||||
if (Array.isArray(response.data)) {
|
||||
return response.data;
|
||||
} else if (response.data && typeof response.data === 'object') {
|
||||
// Se a resposta for um objeto com uma propriedade 'audios' ou similar
|
||||
console.warn('API retornou objeto em vez de array:', response.data);
|
||||
|
||||
// Tenta encontrar o array dentro do objeto
|
||||
if (Array.isArray((response.data as any).audios)) {
|
||||
return (response.data as any).audios;
|
||||
} else if (Array.isArray((response.data as any).data)) {
|
||||
return (response.data as any).data;
|
||||
}
|
||||
}
|
||||
|
||||
// Se não conseguir extrair array, retorna vazio
|
||||
console.warn('Não foi possível extrair array de áudios da resposta');
|
||||
return [];
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao buscar áudios:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao buscar áudios',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta um áudio do banco de dados
|
||||
*
|
||||
* @param audioId - ID do áudio a ser deletado
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async deleteAudio(audioId: string, userEmail?: string): Promise<{ success: boolean; message?: string }> {
|
||||
// Usa valores do GlobalFunctions se não forem fornecidos
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!audioId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'ID do áudio não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Deletando áudio:', {
|
||||
audioId,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
// Faz a requisição DELETE com parâmetros na URL
|
||||
const response = await apiService.delete<{ success: boolean; message?: string } | Array<{ success: boolean; message?: string }>>(
|
||||
`${this.DELETE_AUDIO_ENDPOINT}/${email}/${audioId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa do DELETE:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto: [{"success":true}]
|
||||
let result: { success: boolean; message?: string };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
// Se for array, pega o primeiro elemento
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
// Se for objeto direto
|
||||
result = response.data;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
// Garante que tem a estrutura mínima
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
message: result.message || 'Áudio deletado com sucesso',
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar áudio:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao deletar áudio',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exporta instância única (Singleton)
|
||||
|
||||
+432
-4
@@ -59,6 +59,54 @@ export interface StoredFolder {
|
||||
chatIds: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para Folder no banco de dados
|
||||
*/
|
||||
export interface FolderRecord {
|
||||
id: string;
|
||||
name: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para Chat no banco de dados
|
||||
*/
|
||||
export interface ChatRecord {
|
||||
id: string;
|
||||
title: string;
|
||||
model_id: number;
|
||||
folder_id: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
estabelecimento_id: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para resposta do GET de chats e folders
|
||||
*/
|
||||
export interface GetChatsAndFoldersResponse {
|
||||
chats: ChatRecord[];
|
||||
folders: FolderRecord[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para Message no banco de dados
|
||||
*/
|
||||
export interface MessageRecord {
|
||||
id: string;
|
||||
chat_id: string;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
model_id: number;
|
||||
has_attachments: number;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
total_tokens: number;
|
||||
cost_usd: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Serviço de chat com IA
|
||||
*/
|
||||
@@ -67,6 +115,14 @@ class ChatService {
|
||||
private readonly STORAGE_KEY_CHATS = 'hgtx_chats';
|
||||
private readonly STORAGE_KEY_FOLDERS = 'hgtx_folders';
|
||||
|
||||
// Endpoints para folders e chats
|
||||
private readonly POST_FOLDER_ENDPOINT = '/webhook/codex/post_folders';
|
||||
private readonly GET_CHATS_FOLDERS_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/get_chat_folders';
|
||||
private readonly PUT_CHAT_IN_FOLDER_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/insert_chat_in_folder';
|
||||
private readonly DELETE_FOLDER_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/delete_chat_folder';
|
||||
private readonly DELETE_CHAT_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/delete_chat_messages';
|
||||
private readonly GET_CHAT_MESSAGES_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/get_chat_messages';
|
||||
|
||||
// Formatos de arquivo permitidos (atualmente)
|
||||
private readonly ALLOWED_FILE_TYPES = {
|
||||
// Formatos ativos
|
||||
@@ -280,11 +336,11 @@ class ChatService {
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta um chat
|
||||
* Deleta um chat do localStorage
|
||||
*
|
||||
* @param chatId - ID do chat a ser deletado
|
||||
*/
|
||||
deleteChat(chatId: string): void {
|
||||
deleteChatLocal(chatId: string): void {
|
||||
try {
|
||||
const chats = this.getAllChats();
|
||||
const filteredChats = chats.filter(c => c.id !== chatId);
|
||||
@@ -342,11 +398,11 @@ class ChatService {
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta uma pasta
|
||||
* Deleta uma pasta do localStorage
|
||||
*
|
||||
* @param folderId - ID da pasta a ser deletada
|
||||
*/
|
||||
deleteFolder(folderId: string): void {
|
||||
deleteFolderLocal(folderId: string): void {
|
||||
try {
|
||||
const folders = this.getAllFolders();
|
||||
const filteredFolders = folders.filter(f => f.id !== folderId);
|
||||
@@ -476,6 +532,378 @@ class ChatService {
|
||||
getMaxAttachments(): number {
|
||||
return this.MAX_ATTACHMENTS;
|
||||
}
|
||||
|
||||
// ===== MÉTODOS DE INTEGRAÇÃO COM BANCO DE DADOS =====
|
||||
|
||||
/**
|
||||
* Cria uma nova pasta no banco de dados
|
||||
*
|
||||
* @param name - Nome da pasta
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async createFolder(name: string, userEmail?: string): Promise<{ success: boolean; folder?: FolderRecord }> {
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!name || name.trim().length === 0) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Nome da pasta não pode estar vazio',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Criando pasta:', {
|
||||
name,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await apiService.post<Array<{ success: boolean; user_email?: string; name?: string }>>(
|
||||
this.POST_FOLDER_ENDPOINT,
|
||||
{
|
||||
user_email: email,
|
||||
name: name.trim(),
|
||||
}
|
||||
);
|
||||
|
||||
console.log('Resposta completa do POST:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto: [{"success":true, ...}]
|
||||
let result: { success: boolean; user_email?: string; name?: string };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
result = response.data as any;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao criar pasta:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao criar pasta',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Busca todos os chats e pastas do usuário
|
||||
*
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com chats e folders
|
||||
*/
|
||||
async getChatsAndFolders(userEmail?: string): Promise<GetChatsAndFoldersResponse> {
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Buscando chats e pastas:', {
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await apiService.get<Array<{ result: GetChatsAndFoldersResponse }>>(
|
||||
`${this.GET_CHATS_FOLDERS_ENDPOINT}/${email}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa da API:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto "result": [{"result": {"chats": [...], "folders": [...]}}]
|
||||
let result: GetChatsAndFoldersResponse;
|
||||
|
||||
if (Array.isArray(response.data) && response.data.length > 0) {
|
||||
result = response.data[0].result;
|
||||
console.log('API retornou array com result:', result);
|
||||
} else if ((response.data as any).result) {
|
||||
result = (response.data as any).result;
|
||||
console.log('API retornou objeto com result:', result);
|
||||
} else {
|
||||
// Fallback: retorna vazio
|
||||
console.warn('Estrutura inesperada da resposta');
|
||||
result = { chats: [], folders: [] };
|
||||
}
|
||||
|
||||
// Garante que chats e folders são arrays
|
||||
return {
|
||||
chats: Array.isArray(result.chats) ? result.chats : [],
|
||||
folders: Array.isArray(result.folders) ? result.folders : [],
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao buscar chats e pastas:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao buscar chats e pastas',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Move um chat para dentro de uma pasta
|
||||
*
|
||||
* @param chatId - ID do chat
|
||||
* @param folderId - ID da pasta
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async moveChatToFolder(chatId: string, folderId: string): Promise<{ success: boolean }> {
|
||||
if (!chatId || !folderId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Chat ID e Folder ID são obrigatórios',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Movendo chat para pasta:', {
|
||||
chatId,
|
||||
folderId,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await apiService.put<Array<{ success: boolean }>>(
|
||||
`${this.PUT_CHAT_IN_FOLDER_ENDPOINT}/${folderId}/${chatId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa do PUT:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto: [{"success":true}]
|
||||
let result: { success: boolean };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
result = response.data;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao mover chat para pasta:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao mover chat para pasta',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta uma pasta do banco de dados
|
||||
*
|
||||
* @param folderId - ID da pasta
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async deleteFolder(folderId: string, userEmail?: string): Promise<{ success: boolean }> {
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!folderId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'ID da pasta não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Deletando pasta:', {
|
||||
folderId,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await apiService.delete<Array<{ success: boolean }>>(
|
||||
`${this.DELETE_FOLDER_ENDPOINT}/${email}/${folderId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa do DELETE:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto: [{"success":true}]
|
||||
let result: { success: boolean };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
result = response.data;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar pasta:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao deletar pasta',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta um chat do banco de dados
|
||||
*
|
||||
* @param chatId - ID do chat
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async deleteChat(chatId: string, userEmail?: string): Promise<{ success: boolean }> {
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!chatId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'ID do chat não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Deletando chat:', {
|
||||
chatId,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await apiService.delete<Array<{ success: boolean }>>(
|
||||
`${this.DELETE_CHAT_ENDPOINT}/${email}/${chatId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa do DELETE:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto: [{"success":true}]
|
||||
let result: { success: boolean };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
result = response.data;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar chat:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao deletar chat',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Busca todas as mensagens de um chat específico
|
||||
*
|
||||
* @param chatId - ID do chat
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com array de mensagens
|
||||
*/
|
||||
async getChatMessages(chatId: string, userEmail?: string): Promise<MessageRecord[]> {
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!chatId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'ID do chat não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Buscando mensagens do chat:', {
|
||||
chatId,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await apiService.get<MessageRecord[]>(
|
||||
`${this.GET_CHAT_MESSAGES_ENDPOINT}/${email}/${chatId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa da API:', response);
|
||||
console.log('response.data:', response.data);
|
||||
console.log('É array?:', Array.isArray(response.data));
|
||||
|
||||
// A API retorna diretamente o array de mensagens
|
||||
// Garante que sempre retorna um array
|
||||
if (Array.isArray(response.data)) {
|
||||
return response.data;
|
||||
} else if (response.data && typeof response.data === 'object') {
|
||||
// Se a resposta for um objeto com uma propriedade 'messages' ou similar
|
||||
console.warn('API retornou objeto em vez de array:', response.data);
|
||||
|
||||
// Tenta encontrar o array dentro do objeto
|
||||
if (Array.isArray((response.data as any).messages)) {
|
||||
return (response.data as any).messages;
|
||||
} else if (Array.isArray((response.data as any).data)) {
|
||||
return (response.data as any).data;
|
||||
}
|
||||
}
|
||||
|
||||
// Se não conseguir extrair array, retorna vazio
|
||||
console.warn('Não foi possível extrair array de mensagens da resposta');
|
||||
return [];
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao buscar mensagens:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao buscar mensagens',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exporta instância única (Singleton)
|
||||
|
||||
@@ -16,6 +16,35 @@ export interface ImageGenerationResponse {
|
||||
message: string; // Descrição original
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para uma imagem armazenada no banco de dados
|
||||
*/
|
||||
export interface ImageRecord {
|
||||
id: string;
|
||||
user_email: string;
|
||||
estabelecimento_id: number;
|
||||
description: string;
|
||||
model: string;
|
||||
image_url: string;
|
||||
size: ImageSize;
|
||||
cost_usd: string;
|
||||
total_tokens: number;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para resposta paginada de imagens
|
||||
*/
|
||||
export interface GetImagesResponse {
|
||||
images: ImageRecord[];
|
||||
total: number;
|
||||
page: number;
|
||||
per_page: number;
|
||||
total_pages: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para os dados necessários para geração de imagem
|
||||
*/
|
||||
@@ -55,6 +84,8 @@ export const IMAGE_SIZE_OPTIONS = {
|
||||
*/
|
||||
class ImageGenerationService {
|
||||
private readonly IMAGE_GENERATION_ENDPOINT = '/webhook/codex/image_generator';
|
||||
private readonly GET_IMAGES_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/get_images';
|
||||
private readonly DELETE_IMAGE_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/delete_images';
|
||||
|
||||
/**
|
||||
* Gera uma imagem a partir de uma descrição em texto
|
||||
@@ -213,6 +244,150 @@ class ImageGenerationService {
|
||||
throw new Error('Não foi possível baixar a imagem');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lista imagens do banco de dados com paginação
|
||||
*
|
||||
* @param userEmail - Email do usuário
|
||||
* @param page - Número da página (padrão: 1)
|
||||
* @param perPage - Quantidade de itens por página (padrão: 10)
|
||||
* @returns Promise com a resposta paginada
|
||||
*/
|
||||
async getImages(
|
||||
userEmail?: string,
|
||||
page: number = 1,
|
||||
perPage: number = 10
|
||||
): Promise<ImageRecord[]> {
|
||||
// Usa valores do GlobalFunctions se não forem fornecidos
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Buscando imagens:', {
|
||||
userEmail: email,
|
||||
page,
|
||||
perPage,
|
||||
});
|
||||
|
||||
try {
|
||||
// Faz a requisição GET com parâmetros na URL e query
|
||||
const response = await apiService.get<ImageRecord[]>(
|
||||
`${this.GET_IMAGES_ENDPOINT}/${email}`,
|
||||
{
|
||||
params: {
|
||||
page: page.toString(),
|
||||
per_page: perPage.toString(),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
console.log('Resposta completa da API:', response);
|
||||
console.log('response.data:', response.data);
|
||||
console.log('É array?:', Array.isArray(response.data));
|
||||
|
||||
// A API retorna diretamente o array de imagens
|
||||
// Garante que sempre retorna um array
|
||||
if (Array.isArray(response.data)) {
|
||||
return response.data;
|
||||
} else if (response.data && typeof response.data === 'object') {
|
||||
// Se a resposta for um objeto com uma propriedade 'images' ou similar
|
||||
console.warn('API retornou objeto em vez de array:', response.data);
|
||||
|
||||
// Tenta encontrar o array dentro do objeto
|
||||
if (Array.isArray((response.data as any).images)) {
|
||||
return (response.data as any).images;
|
||||
} else if (Array.isArray((response.data as any).data)) {
|
||||
return (response.data as any).data;
|
||||
}
|
||||
}
|
||||
|
||||
// Se não conseguir extrair array, retorna vazio
|
||||
console.warn('Não foi possível extrair array de imagens da resposta');
|
||||
return [];
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao buscar imagens:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao buscar imagens',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta uma imagem do banco de dados
|
||||
*
|
||||
* @param imageId - ID da imagem a ser deletada
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async deleteImage(imageId: string, userEmail?: string): Promise<{ success: boolean; message?: string }> {
|
||||
// Usa valores do GlobalFunctions se não forem fornecidos
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!imageId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'ID da imagem não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Deletando imagem:', {
|
||||
imageId,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
// Faz a requisição DELETE com parâmetros na URL
|
||||
const response = await apiService.delete<{ success: boolean; message?: string } | Array<{ success: boolean; message?: string }>>(
|
||||
`${this.DELETE_IMAGE_ENDPOINT}/${email}/${imageId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa do DELETE:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API pode retornar um array com um objeto: [{"success":true}]
|
||||
// ou diretamente um objeto: {"success":true}
|
||||
let result: { success: boolean; message?: string };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
// Se for array, pega o primeiro elemento
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
// Se for objeto direto
|
||||
result = response.data;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
// Garante que tem a estrutura mínima
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
message: result.message || 'Imagem deletada com sucesso',
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar imagem:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao deletar imagem',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exporta instância única (Singleton)
|
||||
|
||||
@@ -11,6 +11,22 @@ export interface TranscriptionResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para uma transcrição armazenada no banco de dados
|
||||
*/
|
||||
export interface TranscriptionRecord {
|
||||
id: string;
|
||||
user_email: string;
|
||||
estabelecimento_id: number;
|
||||
audio_file_name: string;
|
||||
audio_duration_seconds: number;
|
||||
transcription_text: string;
|
||||
model: string;
|
||||
audio_url: string;
|
||||
cost_usd: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface para os dados necessários para transcrição
|
||||
*/
|
||||
@@ -25,6 +41,8 @@ export interface TranscriptionRequest {
|
||||
*/
|
||||
class TranscriptionService {
|
||||
private readonly TRANSCRIPTION_ENDPOINT = '/webhook/codex/transcrever_audio';
|
||||
private readonly GET_TRANSCRIPTIONS_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/get_transcrever_audio';
|
||||
private readonly DELETE_TRANSCRIPTION_ENDPOINT = '/webhook/fd073ec0-81ab-4681-8acd-b0da71f6ad30/codex/delete_transcrever_audio';
|
||||
|
||||
/**
|
||||
* Transcreve um arquivo de áudio
|
||||
@@ -105,6 +123,149 @@ class TranscriptionService {
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Lista transcrições do banco de dados com paginação
|
||||
*
|
||||
* @param userEmail - Email do usuário
|
||||
* @param page - Número da página (padrão: 1)
|
||||
* @param perPage - Quantidade de itens por página (padrão: 10)
|
||||
* @returns Promise com o array de transcrições
|
||||
*/
|
||||
async getTranscriptions(
|
||||
userEmail?: string,
|
||||
page: number = 1,
|
||||
perPage: number = 10
|
||||
): Promise<TranscriptionRecord[]> {
|
||||
// Usa valores do GlobalFunctions se não forem fornecidos
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Buscando transcrições:', {
|
||||
userEmail: email,
|
||||
page,
|
||||
perPage,
|
||||
});
|
||||
|
||||
try {
|
||||
// Faz a requisição GET com parâmetros na URL e query
|
||||
const response = await apiService.get<TranscriptionRecord[]>(
|
||||
`${this.GET_TRANSCRIPTIONS_ENDPOINT}/${email}`,
|
||||
{
|
||||
params: {
|
||||
page: page.toString(),
|
||||
per_page: perPage.toString(),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
console.log('Resposta completa da API:', response);
|
||||
console.log('response.data:', response.data);
|
||||
console.log('É array?:', Array.isArray(response.data));
|
||||
|
||||
// A API retorna diretamente o array de transcrições
|
||||
// Garante que sempre retorna um array
|
||||
if (Array.isArray(response.data)) {
|
||||
return response.data;
|
||||
} else if (response.data && typeof response.data === 'object') {
|
||||
// Se a resposta for um objeto com uma propriedade 'transcriptions' ou similar
|
||||
console.warn('API retornou objeto em vez de array:', response.data);
|
||||
|
||||
// Tenta encontrar o array dentro do objeto
|
||||
if (Array.isArray((response.data as any).transcriptions)) {
|
||||
return (response.data as any).transcriptions;
|
||||
} else if (Array.isArray((response.data as any).data)) {
|
||||
return (response.data as any).data;
|
||||
}
|
||||
}
|
||||
|
||||
// Se não conseguir extrair array, retorna vazio
|
||||
console.warn('Não foi possível extrair array de transcrições da resposta');
|
||||
return [];
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao buscar transcrições:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao buscar transcrições',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deleta uma transcrição do banco de dados
|
||||
*
|
||||
* @param transcriptionId - ID da transcrição a ser deletada
|
||||
* @param userEmail - Email do usuário (opcional)
|
||||
* @returns Promise com sucesso ou erro
|
||||
*/
|
||||
async deleteTranscription(transcriptionId: string, userEmail?: string): Promise<{ success: boolean; message?: string }> {
|
||||
// Usa valores do GlobalFunctions se não forem fornecidos
|
||||
const email = userEmail || GlobalFunctions.getTransferProperty(TransferAreaProperties.UsuarioEmail);
|
||||
|
||||
if (!email) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'Email do usuário não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
if (!transcriptionId) {
|
||||
throw {
|
||||
success: false,
|
||||
message: 'ID da transcrição não fornecido',
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Deletando transcrição:', {
|
||||
transcriptionId,
|
||||
userEmail: email,
|
||||
});
|
||||
|
||||
try {
|
||||
// Faz a requisição DELETE com parâmetros na URL
|
||||
const response = await apiService.delete<{ success: boolean; message?: string } | Array<{ success: boolean; message?: string }>>(
|
||||
`${this.DELETE_TRANSCRIPTION_ENDPOINT}/${email}/${transcriptionId}`
|
||||
);
|
||||
|
||||
console.log('Resposta completa do DELETE:', response);
|
||||
console.log('response.data:', response.data);
|
||||
|
||||
// A API retorna um array com um objeto: [{"success":true}]
|
||||
let result: { success: boolean; message?: string };
|
||||
|
||||
if (Array.isArray(response.data)) {
|
||||
// Se for array, pega o primeiro elemento
|
||||
result = response.data[0];
|
||||
console.log('API retornou array, usando primeiro elemento:', result);
|
||||
} else {
|
||||
// Se for objeto direto
|
||||
result = response.data;
|
||||
console.log('API retornou objeto direto:', result);
|
||||
}
|
||||
|
||||
// Garante que tem a estrutura mínima
|
||||
return {
|
||||
success: result.success ?? true,
|
||||
message: result.message || 'Transcrição deletada com sucesso',
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Erro ao deletar transcrição:', error);
|
||||
|
||||
throw {
|
||||
success: false,
|
||||
message: error.message || 'Erro ao deletar transcrição',
|
||||
status: error.status,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exporta instância única (Singleton)
|
||||
|
||||
Reference in New Issue
Block a user