real time chat loading

app/src/components/header.tsx

@@ -40,6 +40,11 @@ const NavBar = () => {
   const {data: session} = useSession()
   const router = useRouter()
   const { toastDispatch } = useToasts()
+  const [path, setPath] = useState("")
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') setPath(window.location.href)
+  }, [path])
 
   useEffect(() => {
     const atTopCallback = () => {
@@ -67,7 +72,7 @@ const NavBar = () => {
           session ?
             <OutlineButton className='mt-4 md:ml-4 md:mt-0' name="Log Out" onClick={signOut} />
             :
-            <OutlineButton className='mt-4 md:ml-4 md:mt-0' name="Log In" onClick={() => signIn("google")}/>
+            <OutlineButton className='mt-4 md:ml-4 md:mt-0' name="Log In" onClick={() => signIn("google", {callbackUrl: path})}/>
         }
       </div>
     </nav>

app/src/pages/demo.tsx

@@ -23,11 +23,13 @@ const Session = ({ data, onClick = () => { }, ...props }) => {
 }
 
 const Demo: NextPage<any> = ({ officers }) => {
+  const updateDelay = 2000
   const { toastDispatch } = useToasts();
   const [input, setInput] = useState({
     phone: '',
   })
   const [sessions, setSessions] = useState([])
+  const [loadingSummary, setLoadingSummary] = useState(false)
   const [focusSession, setFocusSession] = useState(null)
 
   const { data: session } = useSession()
@@ -46,33 +48,41 @@ const Demo: NextPage<any> = ({ officers }) => {
     notify(toastDispatch, "", "Updated Phone: " + input.phone, ToastType.SUCCESS)
   }
 
-  const popOut = async (session) => {
+  const getSummary = async (sesh) => {
-    notify(toastDispatch, "", "Loading call log...", ToastType.DEFAULT)
+    const summary = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/summary/?sessionId=' + sesh.id, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    })).json()
+    return summary.summary
+  }
 
-    const messages = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/message/?sessionId=' + session.id, {
+  const summarize = async () => {
+    // setLoadingSummary(true)
+    notify(toastDispatch, "", "Loading summary...", ToastType.DEFAULT)
+    focusSession.summary = await getSummary(focusSession)
+    notify(toastDispatch, "", "Loaded summary!", ToastType.SUCCESS)
+    setFocusSession(focusSession)
+    // setLoadingSummary(false)
+  }
+
+  const updateMessages = async (sesh) => {
+    const messages = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/message/?sessionId=' + sesh.id, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json'
       },
     })).json()
 
-    const summary = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/summary/?sessionId=' + session.id, {
+    return messages.messages
-      method: 'GET',
+  }
-      headers: {
-        'Content-Type': 'application/json'
-      },
-    })).json()
 
-    session.messages = messages.messages;
+  const popOut = async (sesh) => {
-    session.summary = summary.summary;
+    setFocusSession(sesh)
-    console.log(session)
-
-    setFocusSession(session)
-    notify(toastDispatch, "", "Loaded call log!", ToastType.SUCCESS)
   }
 
   const transfer = async () => {
-    console.log(session['token'].sub)
     const res = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/transfer/?sessionId=' + focusSession.id, {
       method: 'GET',
       headers: {
@@ -87,6 +97,28 @@ const Demo: NextPage<any> = ({ officers }) => {
     setFocusSession(null)
   }
 
+  useEffect(() => {
+    const main = async () => {
+      const fetcher = async () => {
+        focusSession.messages = await updateMessages(focusSession)
+        setFocusSession(focusSession)
+      }
+      if (focusSession) {
+        if (!focusSession.messages) {
+          await fetcher();
+          const cycle = () => setTimeout(async () => {
+            if (focusSession) {
+              await fetcher()
+              cycle()
+            }
+          }, updateDelay)
+          cycle()
+        }
+      }
+    }
+    main()
+  }, [focusSession])
+
   useEffect(() => {
     const interval = setInterval(async () => {
       const fetcher = async () => {
@@ -100,7 +132,7 @@ const Demo: NextPage<any> = ({ officers }) => {
         setSessions(s.sessions)
       }
       await fetcher()
-    }, 2000)
+    }, updateDelay)
 
     return () => clearInterval(interval)
   }, [])
@@ -119,12 +151,13 @@ const Demo: NextPage<any> = ({ officers }) => {
                     <button className={`absolute right-2 top-1 w-fit text-blue transition-all ease-in-out font-bold`} onClick={closePop}>{"X"}</button>
                     {focusSession ?
                       <><div className="flex items-center ">
-                        <h2 className="w-fit text-3xl font-extrabold">Caller: {focusSession.callerPhone} | {focusSession.startedAt}</h2>
+                        <h2 className="w-fit text-2xl font-extrabold">Caller: {focusSession.callerPhone} | {focusSession.startedAt}</h2>
+                        <OutlineButton name="Summarize" onClick={summarize} className="ml-8" />
                         <OutlineButton name="Transfer" onClick={transfer} className="ml-8" />
                       </div>
                         <p className="my-4 text-white"><span className="text-blue font-bold">Summary: </span>{focusSession.summary}</p>
                         <div className="">
-                          {focusSession.messages.map(msg => {
+                          {(focusSession.messages ? focusSession.messages : []).map(msg => {
                             return (
                               <div key={msg.id}>
                                 <p className="text-white"><span className={`${msg.role == "USER" ? "text-green-300" : "text-blue-300"} font-bold`}>{msg.role}: </span>{msg.content}</p>