Integração com o banco de dados

2025-10-23 23:27:28 -03:00
parent 8a9096470f
commit a85465e332
9 changed files with 1909 additions and 670 deletions
@@ -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>
  );
-};
+};