fix(remove messages): reset message data on route change

Author: mehdi-parvizi

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

@@ -6,6 +6,7 @@ import { ENDPOINTS, UserType } from "../../features/constants";
 import useGptStore from "../../utils/store";
 import { useEffect } from "react";
 import { v4 as uuid } from "uuid";
+import { useLocation } from "react-router-dom";
 
 interface Props {
   messageData: Message[];
@@ -20,6 +21,9 @@ interface BasicApiResponse {
 
 const ChatBox = ({ messageData, endpoint, request, id }: Props) => {
   const addMessage = useGptStore((s) => s.addMessage);
+  const resetMessages = useGptStore((s) => s.resetMessages);
+
+  const location = useLocation();
 
   const { data, error, isLoading } = usePost<BasicApiResponse>(
     endpoint,
@@ -31,6 +35,10 @@ const ChatBox = ({ messageData, endpoint, request, id }: Props) => {
     if (data?.data.output) addMessage(UserType.BOT, data?.data.output!, uuid());
   }, [request, data]);
 
+  useEffect(() => {
+    return () => resetMessages();
+  }, [location.pathname]);
+
   return (
     <Box
       w="100%"

web/src/utils/store.ts

@@ -8,6 +8,8 @@ interface DevOpsStore {
 
   messages: Message[];
   addMessage: (user: UserType, content: string, id: string) => void;
+
+  resetMessages: () => void;
 }
 
 const initialState: Pick<DevOpsStore, "isOpen" | "messages"> = {
@@ -22,6 +24,7 @@ const useGptStore = create<DevOpsStore>((set) => ({
     set((state) => ({
       messages: [...state.messages, { user, content, id }],
     })),
+  resetMessages: () => set({ messages: [] }),
 }));
 
 export default useGptStore;