fix(failsafe): use uuid to failsafe the chatbox structure

Author: mehdi-parvizi

web/package-lock.json

@@ -22,6 +22,7 @@
     "react-hook-form": "^7.53.2",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
+    "uuid": "^11.0.3",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

web/package.json

@@ -5,19 +5,28 @@ import usePost from "../../hooks/usePost";
 import { ENDPOINTS, UserType } from "../../features/constants";
 import useGptStore from "../../utils/store";
 import { useEffect } from "react";
+import { v4 as uuid } from "uuid";
 
 interface Props {
   messageData: Message[];
   endpoint: ENDPOINTS;
   request: any;
 }
 
+interface BasicGenApiResponse {
+  output: string;
+}
+
 const ChatBox = ({ messageData, endpoint, request }: Props) => {
   const addMessage = useGptStore((s) => s.addMessage);
-  const { data, error, isPending } = usePost(endpoint, request);
+  const { data, error, isLoading } = usePost<BasicGenApiResponse>(
+    endpoint,
+    request
+  );
 
   useEffect(() => {
-    addMessage(UserType.BOT, data?.data.output);
+    if (data?.data.output) addMessage(UserType.BOT, data?.data.output!, uuid());
+    console.log(messageData);
   }, [request, data]);
 
   return (
@@ -30,10 +39,10 @@ const ChatBox = ({ messageData, endpoint, request }: Props) => {
       p="1rem"
       overflowY="auto"
     >
-      {messageData.map((message, index) => (
+      {messageData.map((message) => (
         <ChatBubble
-          isLoading={isPending}
-          key={index}
+          isLoading={isLoading}
+          key={message.id}
           message={message.content}
           userType={message.user}
         />

web/src/components/internal-ui/ChatBox.tsx

@@ -3,13 +3,18 @@ import apiClient from "../utils/apiClient";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINTS } from "../features/constants";
 
-const usePost = (endpoint: ENDPOINTS, data: any) =>
+const usePost = <T>(endpoint: ENDPOINTS, data: T) =>
   useQuery({
     queryKey: [endpoint],
     queryFn: () =>
-      data ? apiClient.post(endpoint, data) : Promise.reject("No request data"),
-    retry: 4,
-    staleTime: 60,
+      data
+        ? apiClient.post<T>(endpoint, data)
+        : Promise.reject("No request data"),
+    staleTime: 0,
+    enabled: !!data && Object.keys(data).length > 0,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    retry: false,
   });
 
 export default usePost;

web/src/hooks/usePost.ts

@@ -1,17 +1,13 @@
 import { create } from "zustand";
 import { UserType } from "../features/constants";
-
-interface Message {
-  user: UserType;
-  content: string;
-}
+import { Message } from "../features/model";
 
 interface DevOpsStore {
   isOpen: boolean;
   setIsOpen: (bool: boolean) => void;
 
   messages: Message[];
-  addMessage: (user: UserType, content: string) => void;
+  addMessage: (user: UserType, content: string, id: string) => void;
 }
 
 const initialState: Pick<DevOpsStore, "isOpen" | "messages"> = {
@@ -22,9 +18,9 @@ const initialState: Pick<DevOpsStore, "isOpen" | "messages"> = {
 const useGptStore = create<DevOpsStore>((set) => ({
   ...initialState,
   setIsOpen: (bool) => set({ isOpen: bool }),
-  addMessage: (user, content) =>
+  addMessage: (user, content, id) =>
     set((state) => ({
-      messages: [...state.messages, { user, content }],
+      messages: [...state.messages, { user, content, id }],
     })),
 }));