Integração com o banco de dados

src/components/chat/ChatSidebar.tsx

@@ -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"