Merge pull request #38 from AET-DevOps25/feature/improve-chat

Implement crud operations for chats

Author: esadakcam

client/package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.80.5",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -24,6 +25,7 @@
     "@types/prop-types": "^15.7.13",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
@@ -33,7 +35,6 @@
     "tailwindcss": "^3.4.16",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^6.3.5",
-    "@vitejs/plugin-react": "^4.3.3"
+    "vite": "^6.3.5"
   }
 }

client/package.json

@@ -38,8 +38,8 @@ function App() {
     };
   }, [isSidebarOpen]);
 
-  const handleNewConversation = () => {
-    const newConversation = createNewConversation();
+  const handleNewConversation = async () => {
+    const newConversation = await createNewConversation();
     navigate(`/c/${newConversation.id}`);
   };
 

client/src/App.tsx

@@ -7,7 +7,7 @@ interface MessageItemProps {
 }
 
 const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
-  const isUser = message.role === "user";
+  const isUser = message.role === "USER";
 
   return (
     <div

client/src/components/MessageItem.tsx

@@ -0,0 +1,29 @@
+import { createContext, ReactNode, useContext } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+interface UserContextType {
+  user: User | null;
+  isLoading: boolean;
+}
+
+const UserContext = createContext<UserContextType | null>(null);
+
+export const UserContextProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const { user, isLoading } = useAuth();
+  return (
+    <UserContext.Provider value={{ user, isLoading }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUser = (): UserContextType => {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error("useUser must be used within a UserProvider");
+  }
+  return context;
+};
+export default UserContext;

client/src/contexts/userContext.tsx

@@ -1,102 +1,47 @@
 import { useState, useCallback } from "react";
-import { generateId } from "../utils/helpers";
+import { useChats } from "./useChats";
+import { useChatUpdate } from "./useChatUpdate";
+import { useChatCreate } from "./useChatCreate";
+import { useChatDelete } from "./useChatDelete";
 
 export default function useChat() {
-  const [conversations, setConversations] = useState<Conversation[]>([
-    {
-      id: generateId(),
-      title: "New conversation",
-      messages: [],
-      createdAt: new Date(),
-    },
-  ]);
-  const [activeConversationId, setActiveConversationId] = useState<string>(
-    conversations[0].id
-  );
+  const { chats } = useChats();
+  const [activeConversationId, setActiveConversationId] = useState<
+    string | null
+  >(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isTyping, setIsTyping] = useState(false);
+  const { addMessageToChat } = useChatUpdate({});
+  const { createChat } = useChatCreate({});
+  const { deleteChat } = useChatDelete({});
 
   const activeConversation =
-    conversations.find((c) => c.id === activeConversationId) ||
-    conversations[0];
+    chats.find((c) => c.id === activeConversationId) || null;
 
   const addMessage = useCallback(
-    (content: string, role: "user" | "assistant") => {
-      const newMessage: Message = {
-        id: generateId(),
-        content,
-        role,
-        timestamp: new Date(),
-      };
-
-      setConversations((prevConversations) =>
-        prevConversations.map((conversation) =>
-          conversation.id === activeConversationId
-            ? {
-                ...conversation,
-                messages: [...conversation.messages, newMessage],
-                title:
-                  conversation.messages.length === 0 && role === "user"
-                    ? content.substring(0, 30) +
-                      (content.length > 30 ? "..." : "")
-                    : conversation.title,
-              }
-            : conversation
-        )
-      );
-
-      if (role === "user") {
-        // Simulate bot typing
-        setIsTyping(true);
-        const typingTimeout = setTimeout(() => {
-          const responses = [
-            "I'm an AI assistant here to help you with your questions.",
-            "That's an interesting question. Let me think about it.",
-            "I can provide information on a wide range of topics.",
-            "I'm designed to be helpful, harmless, and honest in my responses.",
-            "I'm still learning, but I'll do my best to assist you.",
-          ];
-          const randomResponse =
-            responses[Math.floor(Math.random() * responses.length)];
-          addMessage(randomResponse, "assistant");
-          setIsTyping(false);
-        }, 1500);
-
-        return () => clearTimeout(typingTimeout);
-      }
+    (content: string) => {
+      addMessageToChat({
+        message: content,
+        conversationId: activeConversationId || "",
+      });
     },
-    [activeConversationId]
+    [activeConversationId, addMessageToChat]
   );
 
-  const createNewConversation = useCallback(() => {
-    const newConversation: Conversation = {
-      id: generateId(),
-      title: "New conversation",
-      messages: [],
-      createdAt: new Date(),
-    };
-
-    setConversations((prev) => [...prev, newConversation]);
-    setActiveConversationId(newConversation.id);
-    return newConversation;
-  }, []);
+  const createNewConversation = useCallback(
+    async (title?: string) => await createChat(title ?? "New Conversation"),
+    [createChat]
+  );
 
   const deleteConversation = useCallback(
-    (id: string) => {
-      setConversations((prev) =>
-        prev.filter((conversation) => conversation.id !== id)
-      );
-
-      if (activeConversationId === id && conversations.length > 1) {
-        // Set the active conversation to the most recent one that's not the deleted one
-        const remainingConversations = conversations.filter((c) => c.id !== id);
-        setActiveConversationId(remainingConversations[0].id);
-      }
+    (conversationId: string) => {
+      deleteChat({ conversationId });
     },
-    [activeConversationId, conversations]
+    [deleteChat]
   );
 
   return {
-    conversations,
+    conversations: chats,
     activeConversation,
     activeConversationId,
     setActiveConversationId,

client/src/hooks/useChat.tsx

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUser } from "../contexts/userContext";
+import { createConversation } from "../services/chatService";
+
+interface UseChatCreateProps {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+export const useChatCreate = ({ onSuccess, onError }: UseChatCreateProps) => {
+  const { user } = useUser();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync, isError, error } = useMutation({
+    mutationKey: ["chatCreate", user?.id],
+    mutationFn: (title: string) => createConversation(user!.token, title),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+      if (onSuccess) {
+        onSuccess();
+      }
+    },
+    onError: (error: Error) => {
+      console.error("Error creating chat:", error);
+      if (onError) {
+        onError(error);
+      }
+    },
+  });
+
+  return { createChat: mutateAsync, isError, error };
+};

client/src/hooks/useChatCreate.tsx

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUser } from "../contexts/userContext";
+import { deleteConversation } from "../services/chatService";
+
+interface UseChatDelete {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export const useChatDelete = ({ onSuccess, onError }: UseChatDelete) => {
+  const { user } = useUser();
+  const queryClient = useQueryClient();
+  const { mutate, isError, error } = useMutation({
+    mutationKey: ["chatDelete", user?.id],
+    mutationFn: ({ conversationId }: { conversationId: string }) =>
+      deleteConversation(user!.token, conversationId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+      if (onSuccess) {
+        onSuccess();
+      }
+    },
+    onError: (error: Error) => {
+      console.error("Error deleting chat:", error);
+      if (onError) {
+        onError(error);
+      }
+    },
+  });
+
+  return { deleteChat: mutate, isError, error };
+};

client/src/hooks/useChatDelete.tsx

@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUser } from "../contexts/userContext";
+import { addMessageToConversation } from "../services/chatService";
+
+interface UseChatUpdateProps {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export const useChatUpdate = ({ onSuccess, onError }: UseChatUpdateProps) => {
+  const { user } = useUser();
+  const queryClient = useQueryClient();
+  const { mutate, isError, error } = useMutation({
+    mutationKey: ["chatUpdate", user?.id],
+    mutationFn: ({
+      message,
+      conversationId,
+    }: {
+      message: string;
+      conversationId: string;
+    }) => addMessageToConversation(user!.token, conversationId, message),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+      if (onSuccess) {
+        onSuccess();
+      }
+    },
+    onError: (error: Error) => {
+      console.error("Error updating chat:", error);
+      if (onError) {
+        onError(error);
+      }
+    },
+  });
+
+  return { addMessageToChat: mutate, isError, error };
+};

client/src/hooks/useChatUpdate.tsx

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { getConversationsOfUser } from "../services/chatService";
+import { useUser } from "../contexts/userContext";
+
+export const useChats = () => {
+  const { user } = useUser();
+  const { isLoading, isError, data, error } = useQuery({
+    queryKey: ["chats"],
+    queryFn: () => getConversationsOfUser(user!.token),
+    enabled: !!user,
+  });
+
+  return { isLoading, isError, chats: data ?? [], error };
+};