alert code

app/_components/_rhs/BetterIDEa.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import {
+  useAlertStore,
   useCodeStore,
   useMessagesArrayStore,
   usePidStore,
@@ -13,6 +14,7 @@ const BetterIDEa = () => {
   const curCode = useCodeStore((state) => state.curCode);
   const setMessArr = useMessagesArrayStore((state) => state.setMessArr);
   const setCurPid = usePidStore((state) => state.setCurPid);
+  const setAlert = useAlertStore((state) => state.setAlert);
   const [newMes, setNewMes] = useState("");
 
   useEffect(() => {
@@ -61,6 +63,7 @@ const BetterIDEa = () => {
           console.log("message new", "test\n", m);
           // setNewMes(m);
           if (m[0].Output.print) {
+            setAlert(true);
             alert("You have new Message!");
           }
         }}

app/_components/_rhs/MessagesDD.tsx

@@ -3,12 +3,37 @@ import React, { useState, useEffect } from "react";
 import { brandLightText } from "../../_utils/colors";
 import { getInbox } from "@betteridea/codecell";
 import Image from "next/image";
-import { useMessagesArrayStore, usePidStore } from "../../_store/store";
+import {
+  useAlertStore,
+  useMessagesArrayStore,
+  usePidStore,
+} from "../../_store/store";
 
 const MessagesDD = () => {
   const [mesToggle, setMesToggle] = useState(false);
+  const [notif, setNotif] = useState(false);
   const messArr = useMessagesArrayStore((state) => state.messArr);
   const curPid = usePidStore((state) => state.curPid);
+  const alert = useAlertStore((state) => state.alert);
+  const setAlert = useAlertStore((state) => state.setAlert);
+
+  useEffect(() => {
+    getInbox("1", true);
+  }, []);
+
+  useEffect(() => {
+    console.log("alert effecvt triggere", alert);
+    if (!mesToggle && alert) {
+      getInbox("1", true);
+      setNotif(true);
+    }
+  }, [alert]);
+
+  useEffect(() => {
+    if (mesToggle) {
+      setAlert(false);
+    }
+  }, [mesToggle]);
 
   const stripAnsiCodes = (str: string) => {
     return str?.replace(
@@ -55,6 +80,15 @@ const MessagesDD = () => {
               className={`${mesToggle ? "rotate-180" : "rotate-0"}`}
             />
           )}
+          {notif && (
+            <Image
+              src="/alert.png"
+              width={15}
+              height={21}
+              alt="dd"
+              // className={`${mesToggle ? "rotate-180" : "rotate-0"}`}
+            />
+          )}
         </div>
         {curPid && (
           <Image

app/_store/store.ts

@@ -18,6 +18,11 @@ interface PidState {
   setCurPid: (newPid: string) => void;
 }
 
+interface AlertState {
+  alert: boolean;
+  setAlert: (newAlert: boolean) => void;
+}
+
 export const useTutorialStore = create<TutorialState>()((set) => ({
   curTutorial: "GET Request",
   //   increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
@@ -39,3 +44,7 @@ export const usePidStore = create<PidState>()((set) => ({
   curPid: "",
   setCurPid: (newPid) => set({ curPid: newPid }),
 }));
+export const useAlertStore = create<AlertState>()((set) => ({
+  alert: false,
+  setAlert: (newAlert) => set({ alert: newAlert }),
+}));