fix: Task page does not load properly when URL is copied from one tab to another

src/frontend/wwwroot/app.js

@@ -1,19 +1,19 @@
 (() => {
     window.headers = GetAuthDetails();
-    const apiEndpoint = sessionStorage.getItem('apiEndpoint') || BACKEND_API_URL;
+    const apiEndpoint = getStoredData('apiEndpoint') || BACKEND_API_URL;
     const goHomeButton = document.getElementById("goHomeButton");
     const newTaskButton = document.getElementById("newTaskButton");
     const closeModalButtons = document.querySelectorAll(".modal-close-button");
     const myTasksMenu = document.getElementById("myTasksMenu");
     const tasksStats = document.getElementById("tasksStats");
 
-    //if (!sessionStorage.getItem('apiEndpoint')) sessionStorage.setItem('apiEndpoint', apiEndpoint);
+    //if (!getStoredData('apiEndpoint'))setStoredData('apiEndpoint', apiEndpoint);
     // Force rewrite of apiEndpoint
-    sessionStorage.setItem('apiEndpoint', apiEndpoint);
-    sessionStorage.setItem('context', 'employee');
+   setStoredData('apiEndpoint', apiEndpoint);
+   setStoredData('context', 'employee');
     // Refresh rate is set
-    if (!sessionStorage.getItem('apiRefreshRate')) sessionStorage.setItem('apiRefreshRate', 5000);
-    if (!sessionStorage.getItem('actionStagesRun')) sessionStorage.setItem('actionStagesRun', []);
+    if (!getStoredData('apiRefreshRate'))setStoredData('apiRefreshRate', 5000);
+    if (!getStoredData('actionStagesRun'))setStoredData('actionStagesRun', []);
 
     const getQueryParam = (param) => {
         const urlParams = new URLSearchParams(window.location.search);
@@ -30,7 +30,7 @@
         const viewIframe = document.getElementById('viewIframe');
         if (viewIframe) {
             const viewRoute = getQueryParam('v');
-            const viewContext = sessionStorage.getItem('context');
+            const viewContext = getStoredData('context');
             const noCache = '?nocache=' + new Date().getTime();
             switch (viewRoute) {
                 case 'home':
@@ -112,7 +112,7 @@
     }
 
     const fetchTasksIfNeeded = async () => {
-        const taskStore = JSON.parse(sessionStorage.getItem('task'));
+        const taskStore = JSON.parse(getStoredData('task'));
         window.headers
             .then(headers => {
                 fetch(apiEndpoint + '/plans', {
@@ -164,7 +164,7 @@
                                     setQueryParam('v', 'task');
                                     switchView();
 
-                                    sessionStorage.setItem('task', JSON.stringify({
+                                   setStoredData('task', JSON.stringify({
                                         id: sessionId,
                                         name: taskName
                                     }));
@@ -222,7 +222,7 @@
         if (!userInfo) {
             console.error("Authentication failed. Access to tasks is restricted.");
         } else {
-            sessionStorage.setItem('userInfo', userInfo);
+           setStoredData('userInfo', userInfo);
             await fetchTasksIfNeeded();  // Fetch tasks after initialization if needed
         }
     };

src/frontend/wwwroot/home/home.js

@@ -4,7 +4,7 @@
     ripple: false,
     duration: 3000,
   });
-  const apiEndpoint = sessionStorage.getItem("apiEndpoint");
+  const apiEndpoint = getStoredData("apiEndpoint");
   const newTaskPrompt = document.getElementById("newTaskPrompt");
   const startTaskButton = document.getElementById("startTaskButton");
   const startTaskButtonContainer = document.querySelector(".send-button");

src/frontend/wwwroot/task/task.js

@@ -1,7 +1,7 @@
 (() => {
   const markdownConverter = new showdown.Converter();
-  const apiEndpoint = sessionStorage.getItem("apiEndpoint");
-  const taskStore = JSON.parse(sessionStorage.getItem("task"));
+  const apiEndpoint = getStoredData("apiEndpoint");
+  const taskStore = JSON.parse(getStoredData("task"));
   const taskName = document.getElementById("taskName");
   const taskStatusTag = document.getElementById("taskStatusTag");
   const taskStagesMenu = document.getElementById("taskStagesMenu");
@@ -92,12 +92,12 @@
         agentIcon = "manager";
         break;
       case "HumanAgent":
-        let userNumber = sessionStorage.getItem("userNumber");
+        let userNumber = getStoredData("userNumber");
         if (userNumber == null) {
           // Generate a random number between 0 and 6
           userNumber = Math.floor(Math.random() * 6);
           // Create the icon name by concatenating 'user' with the random number
-          sessionStorage.setItem("userNumber", userNumber);
+          setStoredData("userNumber", userNumber);
         }
         let iconName = "user" + userNumber;
         agentIcon = iconName;
@@ -161,7 +161,7 @@
 
     if (taskCancelButton) {
       taskCancelButton.addEventListener("click", (event) => {
-        const apiTaskStore = JSON.parse(sessionStorage.getItem("apiTask"));
+        const apiTaskStore = JSON.parse(getStoredData("apiTask"));
         handleDisableOfActions("completed")
 
          // Explicitly disable chatbox and message button
@@ -232,7 +232,7 @@
         updateTaskProgress(data[0]);
         fetchTaskStages(data[0]);
 
-        sessionStorage.setItem("apiTask", JSON.stringify(data[0]));
+        setStoredData("apiTask", JSON.stringify(data[0]));
         //const isHumanClarificationRequestNull = data?.[0]?.human_clarification_request === null
         const isHumanClarificationResponseNotNull = data?.[0]?.human_clarification_response !== null;
         const taskMessageTextareaElement =document.getElementById("taskMessageTextarea");
@@ -375,15 +375,15 @@
 
             updateTaskDetailsAgents([...new Set(taskAgents)]);
 
-            sessionStorage.setItem("showApproveAll", false);
+            setStoredData("showApproveAll", false);
 
             // Feature approve all removed for this version
             // if (isHumanFeedbackPending()) {
-            //     sessionStorage.setItem('showApproveAll', false);
+            //    setStoredData('showApproveAll', false);
             //     console.log('showApproveAll status', "showApproveAll is false");
 
             // } else {
-            //     sessionStorage.setItem('showApproveAll', taskStageApprovalStatus === taskStageCount);
+            //    setStoredData('showApproveAll', taskStageApprovalStatus === taskStageCount);
             //     console.log('showApproveAll status', taskStageApprovalStatus === taskStageCount);
 
             // }
@@ -450,8 +450,8 @@
           // console.log(groupByStepId(data));
 
           if (
-            sessionStorage.getItem("context") &&
-            sessionStorage.getItem("context") === "customer"
+            getStoredData("context") &&
+            getStoredData("context") === "customer"
           ) {
             data = contextFilter(data);
           }
@@ -477,7 +477,7 @@
               messages.forEach((message) => {
                 const messageItem = document.createElement("div");
                 const showApproveAll =
-                  sessionStorage.getItem("showApproveAll") === "true" &&
+                  getStoredData("showApproveAll") === "true" &&
                   data.length === messageCount;
 
                 let approveAllStagesButton = "";
@@ -491,8 +491,8 @@
                     : "has-status-active";
 
                 if (
-                  sessionStorage.getItem("context") &&
-                  sessionStorage.getItem("context") !== "customer"
+                  getStoredData("context") &&
+                  getStoredData("context") !== "customer"
                 ) {
                   if (showApproveAll) {
                     console.log("Creating approveAllStagesButton");
@@ -550,8 +550,8 @@
                 taskMessages.appendChild(messageItem);
 
                 if (
-                  sessionStorage.getItem("context") &&
-                  sessionStorage.getItem("context") !== "customer"
+                  getStoredData("context") &&
+                  getStoredData("context") !== "customer"
                 ) {
                   if (showApproveAll) {
                     document
@@ -576,20 +576,19 @@
             }
 
             if (
-              sessionStorage.getItem("context") &&
-              sessionStorage.getItem("context") === "customer" &&
-              !sessionStorage
-                .getItem("actionStagesRun")
+              getStoredData("context") &&
+              getStoredData("context") === "customer" &&
+              !getStoredData("actionStagesRun")
                 .includes(task.session_id)
             ) {
               actionStages(task, true);
 
               let actionStagesRun = JSON.parse(
-                sessionStorage.getItem("actionStagesRun") || "[]"
+                getStoredData("actionStagesRun") || "[]"
               );
 
               actionStagesRun.push(task.session_id);
-              sessionStorage.setItem(
+              setStoredData(
                 "actionStagesRun",
                 JSON.stringify(actionStagesRun)
               );
@@ -645,7 +644,7 @@
   };
 
   const isHumanFeedbackPending = () => {
-    const storedData = sessionStorage.getItem("apiTask");
+    const storedData = getStoredData("apiTask");
     const planDetails = JSON.parse(storedData);
     return (
       planDetails.human_clarification_request !== null &&
@@ -792,7 +791,7 @@
           // Continue polling by calling fetchLoop again
           setTimeout(
             () => fetchLoop(id),
-            Number(sessionStorage.getItem("apiRefreshRate"))
+            Number(getStoredData("apiRefreshRate"))
           );
         } catch (error) {
           console.error("Error in fetchLoop:", error);

src/frontend/wwwroot/utils.js

@@ -68,3 +68,22 @@ window.GetAuthDetails = async () => {
         return  headers;
     }
 };
+
+window.getStoredData = (key)=> {
+    let data = localStorage.getItem(key);
+
+        // If not found in localStorage, check sessionStorage
+        if (!data) {
+            data = getStoredData(key);
+            if (data) {
+                // Move data from sessionStorage to localStorage
+                setStoredData(key, data);
+                sessionStorage.removeItem(key); // Optional cleanup
+            }
+        }
+        return data;
+}
+
+window.setStoredData = (key, value)=> {
+    localStorage.setItem(key, value)
+}