Merge pull request #157 from kreneskyp/fast_api_chat_history

ChatHistory converted to FastAPI and adds delete button

frontend/chat/history/ChatHistoryView.js

@@ -1,35 +1,20 @@
-import React, { useEffect, useCallback } from "react";
-import { useQueryLoader } from "react-relay";
-import { ChatHistoryQuery } from "chat/graphql/ChatHistoryQuery";
+import React from "react";
 import { ChatTable } from "chat/history/ChatTable";
 import { Heading, Spinner, VStack } from "@chakra-ui/react";
 import { Layout, LayoutContent } from "site/Layout";
+import { usePaginatedAPI } from "utils/hooks/usePaginatedAPI";
 
 export const ChatHistoryView = () => {
-  const [queryRef, loadQuery] = useQueryLoader(ChatHistoryQuery);
-
-  const load = useCallback((limit = 10, offset = 0) => {
-    loadQuery({ limit, offset }, { fetchPolicy: "store-and-network" });
-  });
-
-  useEffect(() => {
-    load();
-  }, []);
-
-  if (!queryRef) {
-    return <Spinner />;
-  }
+  const { page, load, isLoading } = usePaginatedAPI("/api/chats/");
 
   return (
     <Layout>
       <LayoutContent>
         <VStack alignItems="start" p={5} spacing={4}>
           <Heading>Chats</Heading>
-          <ChatTable queryRef={queryRef} load={load} />
+          {isLoading ? <Spinner /> : <ChatTable page={page} load={load} />}
         </VStack>
       </LayoutContent>
     </Layout>
   );
 };
-
-export default ChatHistoryView;

frontend/chat/history/ChatTable.js

@@ -1,15 +1,45 @@
-import React from "react";
-import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";
+import axios from "axios";
+import React, { useState } from "react";
+import {
+  Text,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  AlertDialog,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogBody,
+  AlertDialogFooter,
+  Button,
+} from "@chakra-ui/react";
 import { Link } from "react-router-dom";
-import { ChatHistoryQuery } from "chat/graphql/ChatHistoryQuery";
-import { usePreloadedQuery } from "react-relay/hooks";
 import { Pagination } from "components/Pagination";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
-export const ChatTable = ({ queryRef, load }) => {
-  const { chatPage } = usePreloadedQuery(ChatHistoryQuery, queryRef);
-  const { count, hasNext, hasPrevious, objects, pages, pageNumber } = chatPage;
+export const ChatTable = ({ page, load }) => {
+  const { count, has_next, has_previous, objects, pages, page_number } = page;
   const chats = objects;
 
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedChat, setSelectedChat] = useState(null);
+
+  const onClose = () => setIsOpen(false);
+  const onDelete = async () => {
+    try {
+      await axios.delete(`/api/chats/${selectedChat.id}`);
+      load(page_number - 1); // Refresh the chat list after delete
+      setIsOpen(false); // Close the dialog
+    } catch (error) {
+      console.error("Failed to delete chat:", error);
+      setIsOpen(false); // Close the dialog
+    }
+  };
+
   return (
     <div>
       <Table colorScheme="gray" mb={10}>
@@ -24,31 +54,67 @@ export const ChatTable = ({ queryRef, load }) => {
           {chats?.map((chat) => {
             const { id, name } = chat;
             const chatLink = `/chat/${id}`;
-            const createdAt = new Date(chat.createdAt).toLocaleString();
-
+            const createdAt = new Date(chat.created_at).toLocaleString();
             return (
               <Tr key={id}>
                 <Td>
-                  <Link to={chatLink}>{name || createdAt}</Link>
+                  <Link to={chatLink}>
+                    {name || createdAt} ({id})
+                  </Link>
                 </Td>
                 <Td>{createdAt}</Td>
                 <Td>
-                  {chat.agents.map((agent) => (
-                    <span>{agent.alias} </span>
+                  {chat.agents?.map((agent) => (
+                    <span key={agent.alias}>{agent.alias} </span>
                   ))}
                 </Td>
+                <Td>
+                  <Button
+                    onClick={() => {
+                      setSelectedChat(chat);
+                      setIsOpen(true);
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </Button>
+                </Td>
               </Tr>
             );
           })}
         </Tbody>
       </Table>
       <Pagination
-        hasNext={hasNext}
-        hasPrevious={hasPrevious}
+        hasNext={has_next}
+        hasPrevious={has_previous}
         load={load}
         pages={pages}
-        pageNumber={pageNumber}
+        pageNumber={page_number}
       />
+
+      <AlertDialog isOpen={isOpen} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Delete Chat
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              <Text>{selectedChat?.name || selectedChat?.id}</Text>
+              <Text mt={10}>
+                Are you sure you want to delete this chat? This action cannot be
+                undone.
+              </Text>
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button onClick={onClose}>Cancel</Button>
+              <Button colorScheme="red" onClick={onDelete} ml={3}>
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </div>
   );
 };