fix: Bugs fixing for 19597,19553,19524,19330,19278,19238

src/backend/context/cosmos_memory_kernel.py

@@ -268,7 +268,7 @@ async def get_plan(self, plan_id: str) -> Optional[Plan]:
 
     async def get_all_plans(self) -> List[Plan]:
         """Retrieve all plans."""
-        query = "SELECT * FROM c WHERE c.user_id=@user_id AND c.data_type=@data_type ORDER BY c._ts DESC OFFSET 0 LIMIT 10"
+        query = "SELECT * FROM c WHERE c.user_id=@user_id AND c.data_type=@data_type ORDER BY c._ts DESC"
         parameters = [
             {"name": "@data_type", "value": "plan"},
             {"name": "@user_id", "value": self.user_id},

src/frontend/package.json

@@ -67,4 +67,4 @@
     "vite": "^5.4.19",
     "vitest": "^1.6.1"
   }
-}
+}

src/frontend/src/components/NotFound/ContentNotFound.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  Button,
+  Image,
+  Text,
+  Title2,
+  makeStyles,
+  tokens,
+} from "@fluentui/react-components";
+import NotFound from "../../assets/WebWarning.svg";
+
+type ContentNotFoundProps = {
+  imageSrc?: string;
+  title?: string;
+  subtitle?: string;
+  primaryButtonText?: string;
+  onPrimaryButtonClick?: () => void;
+  secondaryButtonText?: string;
+  onSecondaryButtonClick?: () => void;
+};
+
+const DEFAULT_IMAGE = NotFound;
+const DEFAULT_TITLE = "";
+
+const useStyles = makeStyles({
+  root: {
+    minHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    gap: tokens.spacingVerticalL,
+    padding: tokens.spacingVerticalXXL,
+  },
+  image: {
+    width: "80px",
+    height: "80px",
+    objectFit: "contain",
+  },
+  buttonGroup: {
+    display: "flex",
+    gap: tokens.spacingHorizontalM,
+    justifyContent: "center",
+    marginTop: tokens.spacingVerticalM,
+  },
+});
+
+const ContentNotFound: React.FC<ContentNotFoundProps> = ({
+  imageSrc = DEFAULT_IMAGE,
+  title = DEFAULT_TITLE,
+  subtitle,
+  primaryButtonText,
+  onPrimaryButtonClick,
+  secondaryButtonText,
+  onSecondaryButtonClick,
+}) => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <Image src={imageSrc} alt="Content Not Found" className={styles.image} />
+      <Title2>{title}</Title2>
+      {subtitle && (
+        <Text style={{ color: "gray", fontSize: 16, fontFamily: "sans-serif" }}>
+          {subtitle}
+        </Text>
+      )}
+      {(primaryButtonText || secondaryButtonText) && (
+        <div className={styles.buttonGroup}>
+          {primaryButtonText && (
+            <Button appearance="primary" onClick={onPrimaryButtonClick}>
+              {primaryButtonText}
+            </Button>
+          )}
+          {secondaryButtonText && (
+            <Button appearance="outline" onClick={onSecondaryButtonClick}>
+              {secondaryButtonText}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ContentNotFound;

src/frontend/src/components/content/PlanChat.tsx

@@ -19,6 +19,7 @@ import "../../styles/Chat.css";
 import "../../styles/prism-material-oceanic.css";
 import { TaskService } from "@/services/TaskService";
 import InlineToaster from "../toast/InlineToaster";
+import ContentNotFound from "../NotFound/ContentNotFound";
 
 const PlanChat: React.FC<PlanChatProps> = ({
   planData,
@@ -62,8 +63,6 @@ const PlanChat: React.FC<PlanChatProps> = ({
     }
   }, [input]); // or [inputValue, submittingChatDisableInput]
 
-
-
   const scrollToBottom = () => {
     messagesContainerRef.current?.scrollTo({
       top: messagesContainerRef.current.scrollHeight,
@@ -72,7 +71,10 @@ const PlanChat: React.FC<PlanChatProps> = ({
     setShowScrollButton(false);
   };
 
-  if (!planData) return <Spinner size="large" />;
+  if (!planData)
+    return (
+      <ContentNotFound subtitle="The requested page could not be found." />
+    );
   return (
     <div className="chat-container">
       <div className="messages" ref={messagesContainerRef}>
@@ -126,10 +128,13 @@ const PlanChat: React.FC<PlanChatProps> = ({
                               style={{ height: 28, width: 28 }}
                               icon={<Copy />}
                             />
-
                           </div>
 
-                          <Tag icon={<DiamondRegular />} appearance="filled" size="extra-small">
+                          <Tag
+                            icon={<DiamondRegular />}
+                            appearance="filled"
+                            size="extra-small"
+                          >
                             Sample data for demonstration purposes only.
                           </Tag>
                         </div>
@@ -151,13 +156,12 @@ const PlanChat: React.FC<PlanChatProps> = ({
           style={{
             bottom: inputHeight,
             position: "absolute", // ensure this or your class handles it
-            right: 16,            // optional, for right alignment
+            right: 16, // optional, for right alignment
             zIndex: 5,
           }}
         >
           Back to bottom
         </Tag>
-
       )}
       <InlineToaster />
       <div ref={inputContainerRef} className="plan-chat-input-container">
@@ -167,15 +171,17 @@ const PlanChat: React.FC<PlanChatProps> = ({
             onChange={setInput}
             onEnter={() => OnChatSubmit(input)}
             disabledChat={
-              planData.enableChat ? submittingChatDisableInput : true
+              planData?.enableChat ? submittingChatDisableInput : true
             }
             placeholder="Add more info to this task..."
           >
             <Button
               appearance="transparent"
               onClick={() => OnChatSubmit(input)}
               icon={<Send />}
-              disabled={planData.enableChat ? submittingChatDisableInput : true}
+              disabled={
+                planData?.enableChat ? submittingChatDisableInput : true
+              }
             />
           </ChatInput>
         </div>

src/frontend/src/components/content/TaskList.tsx

@@ -10,10 +10,12 @@ import { MoreHorizontal20Regular } from "@fluentui/react-icons";
 import React from "react";
 import "../../styles/TaskList.css";
 import { Task, TaskListProps } from "@/models";
-import CoralAccordion from "@/coral/components/CoralAccordion/CoralAccordion";
-import CoralAccordionItem from "@/coral/components/CoralAccordion/CoralAccordionItem";
-import CoralAccordionHeader from "@/coral/components/CoralAccordion/CoralAccordionHeader";
-import CoralAccordionPanel from "@/coral/components/CoralAccordion/CoralAccordionPanel";
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+} from "@fluentui/react-components";
 
 const TaskList: React.FC<TaskListProps> = ({
   inProgressTasks,
@@ -39,16 +41,15 @@ const TaskList: React.FC<TaskListProps> = ({
           }
         }}
       >
-
         <div className="sideNavTick" />
         <div className="left">
           <div className="task-name-truncated" title={task.name}>
             {task.name}
           </div>
-          {task.date && task.status == "completed" &&(
+          {task.date && task.status == "completed" && (
             <Caption1 className="task-list-task-date">{task.date}</Caption1>
           )}
-          {task.status == "inprogress" &&(
+          {task.status == "inprogress" && (
             <Caption1 className="task-list-task-date">{`${task?.completed_steps} of ${task?.total_steps} completed`}</Caption1>
           )}
         </div>
@@ -70,40 +71,39 @@ const TaskList: React.FC<TaskListProps> = ({
     <div key={key} className="task-skeleton-container">
       <Skeleton aria-label="Loading task">
         <div className="task-skeleton-wrapper">
-          <SkeletonItem
-            shape="rectangle"
-            animation="wave"
-            size={24}
-          />
+          <SkeletonItem shape="rectangle" animation="wave" size={24} />
         </div>
       </Skeleton>
     </div>
   );
 
   return (
-    <CoralAccordion>
-      <CoralAccordionItem defaultOpen>
-        <CoralAccordionHeader chevron>In progress</CoralAccordionHeader>
-
-        <CoralAccordionPanel>
-          {loading && inProgressTasks.length === 0
-            ? [...Array(3)].map((_, i) =>
-              renderSkeleton(`inprogress-skel-${i}`)
-            )
-            : inProgressTasks.map(renderTaskItem)}
-        </CoralAccordionPanel>
-      </CoralAccordionItem>
-
-      <CoralAccordionItem defaultOpen>
-        <CoralAccordionHeader chevron>Completed</CoralAccordionHeader>
-
-        <CoralAccordionPanel>
-          {loading && completedTasks.length === 0
-            ? [...Array(2)].map((_, i) => renderSkeleton(`completed-skel-${i}`))
-            : completedTasks.map(renderTaskItem)}
-        </CoralAccordionPanel>
-      </CoralAccordionItem>
-    </CoralAccordion>
+    <div className="task-list-container">
+      <Accordion defaultOpenItems="1" collapsible>
+        <AccordionItem value="1">
+          <AccordionHeader expandIconPosition="end">
+            In progress
+          </AccordionHeader>
+          <AccordionPanel>
+            {loading
+              ? Array.from({ length: 5 }, (_, i) =>
+                  renderSkeleton(`in-progress-${i}`)
+                )
+              : inProgressTasks.map(renderTaskItem)}
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="2">
+          <AccordionHeader expandIconPosition="end">Completed</AccordionHeader>
+          <AccordionPanel>
+            {loading
+              ? Array.from({ length: 5 }, (_, i) =>
+                  renderSkeleton(`completed-${i}`)
+                )
+              : completedTasks.map(renderTaskItem)}
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </div>
   );
 };
 

src/frontend/src/coral/components/CoralAccordion/CoralAccordionPanel.tsx

@@ -1,7 +1,13 @@
 import React from "react";
 
-const CoralAccordionPanel: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <div style={{ margin: "8px" }}>{children}</div>;
+const CoralAccordionPanel: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <div style={{ margin: "8px", maxHeight: 280, overflowY: "auto" }}>
+      {children}
+    </div>
+  );
 };
-
+CoralAccordionPanel.displayName = "CoralAccordionPanel";
 export default CoralAccordionPanel;