feat: UI UX Update to react

README.md

@@ -22,10 +22,12 @@ Solution overview
 The solution leverages Azure OpenAI Service, Azure Container Apps, Azure Cosmos DB, and Azure Container Registry to create an intelligent automation pipeline. It uses a multi-agent approach where specialized AI agents work together to plan, execute, and validate tasks based on user input.
 
 ### Solution architecture
-|![image](./docs/images/readme/macae-architecture.png)|
+|![image](./docs/images/readme/architecture.png)|
 |---|
 
-
+### Agentic architecture
+|![image](./docs/images/readme/agent_flow.png)|
+|---|
 
 ### How to customize
 If you'd like to customize the solution accelerator, here are some common areas to start:
@@ -111,7 +113,7 @@ either by deleting the resource group in the Portal or running `azd down`.
 Business Scenario
 </h2>
 
-|![image](./docs/images/readme/macae-application.png)|
+|![image](./docs/images/readme/application.png)|
 |---|
 
 <br/>

__azurite_db_queue__.json

@@ -0,0 +1 @@
+{"filename":"c:\\src\\Multi-Agent-Custom-Automation-Engine-Solution-Accelerator\\__azurite_db_queue__.json","collections":[{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$QUEUES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"name":{"name":"name","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$QUEUES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$MESSAGES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"queueName":{"name":"queueName","dirty":false,"values":[]},"messageId":{"name":"messageId","dirty":false,"values":[]},"visibleTime":{"name":"visibleTime","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$MESSAGES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

__azurite_db_queue_extent__.json

@@ -0,0 +1 @@
+{"filename":"c:\\src\\Multi-Agent-Custom-Automation-Engine-Solution-Accelerator\\__azurite_db_queue_extent__.json","collections":[{"name":"$EXTENTS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"id":{"name":"id","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$EXTENTS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

infra/main.bicep

@@ -1040,7 +1040,7 @@ module containerApp 'br/public:avm/res/app/container-app:0.14.2' = if (container
     containers: [
       {
         name: containerAppConfiguration.?containerName ?? 'backend'
-        image: '${containerAppConfiguration.?containerImageRegistryDomain ?? 'biabcontainerreg.azurecr.io'}/${containerAppConfiguration.?containerImageName ?? 'macaebackend'}:${containerAppConfiguration.?containerImageTag ?? 'latest'}'
+        image: '${containerAppConfiguration.?containerImageRegistryDomain ?? 'biabcontainerreg.azurecr.io'}/${containerAppConfiguration.?containerImageName ?? 'macaebackend'}:${containerAppConfiguration.?containerImageTag ?? 'dev01'}'
         resources: {
           //TODO: Make cpu and memory parameterized
           cpu: containerAppConfiguration.?containerCpu ?? '2.0'
@@ -1151,7 +1151,7 @@ module webSite 'br/public:avm/res/web/site:0.15.1' = if (webSiteEnabled) {
     diagnosticSettings: [{ workspaceResourceId: logAnalyticsWorkspaceId }]
     publicNetworkAccess: 'Enabled' //TODO: use Azure Front Door WAF or Application Gateway WAF instead
     siteConfig: {
-      linuxFxVersion: 'DOCKER|${webSiteConfiguration.?containerImageRegistryDomain ?? 'biabcontainerreg.azurecr.io'}/${webSiteConfiguration.?containerImageName ?? 'macaefrontend'}:${webSiteConfiguration.?containerImageTag ?? 'latest'}'
+      linuxFxVersion: 'DOCKER|${webSiteConfiguration.?containerImageRegistryDomain ?? 'biabcontainerreg.azurecr.io'}/${webSiteConfiguration.?containerImageName ?? 'macaefrontend'}:${webSiteConfiguration.?containerImageTag ?? 'dev01'}'
     }
     appSettingsKeyValuePairs: {
       SCM_DO_BUILD_DURING_DEPLOYMENT: 'true'

src/backend/app_kernel.py

@@ -70,7 +70,7 @@
 # Add this near the top of your app.py, after initializing the app
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=[frontend_url],  # Add your frontend server URL
+    allow_origins=[frontend_url],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -519,10 +519,12 @@ async def approve_step_endpoint(
         return {"status": "All steps approved"}
 
 
-@app.get("/api/plans", response_model=List[PlanWithSteps])
+@app.get("/api/plans")
 async def get_plans(
-    request: Request, session_id: Optional[str] = Query(None)
-) -> List[PlanWithSteps]:
+    request: Request,
+    session_id: Optional[str] = Query(None),
+    plan_id: Optional[str] = Query(None),
+):
     """
     Retrieve plans for the current user.
 
@@ -607,6 +609,24 @@ async def get_plans(
         plan_with_steps = PlanWithSteps(**plan.model_dump(), steps=steps)
         plan_with_steps.update_step_counts()
         return [plan_with_steps]
+    if plan_id:
+        plan = await memory_store.get_plan_by_plan_id(plan_id=plan_id)
+        if not plan:
+            track_event_if_configured(
+                "GetPlanBySessionNotFound",
+                {"status_code": 400, "detail": "Plan not found"},
+            )
+            raise HTTPException(status_code=404, detail="Plan not found")
+
+        # Use get_steps_by_plan to match the original implementation
+        steps = await memory_store.get_steps_by_plan(plan_id=plan.id)
+        messages = await memory_store.get_data_by_type_and_session_id(
+            "agent_message", session_id=plan.session_id
+        )
+
+        plan_with_steps = PlanWithSteps(**plan.model_dump(), steps=steps)
+        plan_with_steps.update_step_counts()
+        return [plan_with_steps, messages]
 
     all_plans = await memory_store.get_all_plans()
     # Fetch steps for all plans concurrently
@@ -756,6 +776,74 @@ async def get_agent_messages(session_id: str, request: Request) -> List[AgentMes
     return agent_messages
 
 
+@app.get("/api/agent_messages_by_plan/{plan_id}", response_model=List[AgentMessage])
+async def get_agent_messages_by_plan(
+    plan_id: str, request: Request
+) -> List[AgentMessage]:
+    """
+    Retrieve agent messages for a specific session.
+
+    ---
+    tags:
+      - Agent Messages
+    parameters:
+      - name: session_id
+        in: path
+        type: string
+        required: true
+        in: path
+        type: string
+        required: true
+        description: The ID of the session to retrieve agent messages for
+    responses:
+      200:
+        description: List of agent messages associated with the specified session
+        schema:
+          type: array
+          items:
+            type: object
+            properties:
+              id:
+                type: string
+                description: Unique ID of the agent message
+              session_id:
+                type: string
+                description: Session ID associated with the message
+              plan_id:
+                type: string
+                description: Plan ID related to the agent message
+              content:
+                type: string
+                description: Content of the message
+              source:
+                type: string
+                description: Source of the message (e.g., agent type)
+              timestamp:
+                type: string
+                format: date-time
+                description: Timestamp of the message
+              step_id:
+                type: string
+                description: Optional step ID associated with the message
+      400:
+        description: Missing or invalid user information
+      404:
+        description: Agent messages not found
+    """
+    authenticated_user = get_authenticated_user_details(request_headers=request.headers)
+    user_id = authenticated_user["user_principal_id"]
+    if not user_id:
+        track_event_if_configured(
+            "UserIdNotFound", {"status_code": 400, "detail": "no user"}
+        )
+        raise HTTPException(status_code=400, detail="no user")
+
+    # Initialize memory context
+    kernel, memory_store = await initialize_runtime_and_context("", user_id)
+    agent_messages = await memory_store.get_data_by_type_and_plan_id("agent_message")
+    return agent_messages
+
+
 @app.delete("/api/messages")
 async def delete_all_messages(request: Request) -> Dict[str, str]:
     """

src/backend/context/cosmos_memory_kernel.py

@@ -230,6 +230,17 @@ async def get_plan_by_session(self, session_id: str) -> Optional[Plan]:
         plans = await self.query_items(query, parameters, Plan)
         return plans[0] if plans else None
 
+    async def get_plan_by_plan_id(self, plan_id: str) -> Optional[Plan]:
+        """Retrieve a plan associated with a session."""
+        query = "SELECT * FROM c WHERE c.id=@id AND c.user_id=@user_id AND c.data_type=@data_type"
+        parameters = [
+            {"name": "@id", "value": plan_id},
+            {"name": "@data_type", "value": "plan"},
+            {"name": "@user_id", "value": self.user_id},
+        ]
+        plans = await self.query_items(query, parameters, Plan)
+        return plans[0] if plans else None
+
     async def get_thread_by_session(self, session_id: str) -> Optional[Any]:
         """Retrieve a plan associated with a session."""
         query = "SELECT * FROM c WHERE c.session_id=@session_id AND c.user_id=@user_id AND c.data_type=@data_type"
@@ -257,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 5"
+        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"
         parameters = [
             {"name": "@data_type", "value": "plan"},
             {"name": "@user_id", "value": self.user_id},
@@ -431,6 +442,27 @@ async def get_data_by_type(self, data_type: str) -> List[BaseDataModel]:
             logging.exception(f"Failed to query data by type from Cosmos DB: {e}")
             return []
 
+    async def get_data_by_type_and_session_id(
+        self, data_type: str, session_id: str
+    ) -> List[BaseDataModel]:
+        """Query the Cosmos DB for documents with the matching data_type, session_id and user_id."""
+        await self.ensure_initialized()
+        if self._container is None:
+            return []
+
+        model_class = self.MODEL_CLASS_MAPPING.get(data_type, BaseDataModel)
+        try:
+            query = "SELECT * FROM c WHERE c.session_id=@session_id AND c.user_id=@user_id AND c.data_type=@data_type ORDER BY c._ts ASC"
+            parameters = [
+                {"name": "@session_id", "value": session_id},
+                {"name": "@data_type", "value": data_type},
+                {"name": "@user_id", "value": self.user_id},
+            ]
+            return await self.query_items(query, parameters, model_class)
+        except Exception as e:
+            logging.exception(f"Failed to query data by type from Cosmos DB: {e}")
+            return []
+
     async def delete_item(self, item_id: str, partition_key: str) -> None:
         """Delete an item from Cosmos DB."""
         await self.ensure_initialized()

src/backend/kernel_agents/planner_agent.py

@@ -14,10 +14,17 @@
 from kernel_tools.procurement_tools import ProcurementTools
 from kernel_tools.product_tools import ProductTools
 from kernel_tools.tech_support_tools import TechSupportTools
-from models.messages_kernel import (AgentMessage, AgentType,
-                                    HumanFeedbackStatus, InputTask, Plan,
-                                    PlannerResponsePlan, PlanStatus, Step,
-                                    StepStatus)
+from models.messages_kernel import (
+    AgentMessage,
+    AgentType,
+    HumanFeedbackStatus,
+    InputTask,
+    Plan,
+    PlannerResponsePlan,
+    PlanStatus,
+    Step,
+    StepStatus,
+)
 from semantic_kernel.functions import KernelFunction
 from semantic_kernel.functions.kernel_arguments import KernelArguments
 
@@ -188,7 +195,7 @@ async def handle_input_task(self, input_task: InputTask) -> str:
                     session_id=input_task.session_id,
                     user_id=self._user_id,
                     plan_id=plan.id,
-                    content=f"Generated a plan with {len(steps)} steps. Click the blue check box beside each step to complete it, click the x to remove this step.",
+                    content=f"Generated a plan with {len(steps)} steps. Click the checkmark beside each step to complete it, click the x to reject this step.",
                     source=AgentType.PLANNER.value,
                     step_id="",
                 )
@@ -200,7 +207,7 @@ async def handle_input_task(self, input_task: InputTask) -> str:
                     "session_id": input_task.session_id,
                     "user_id": self._user_id,
                     "plan_id": plan.id,
-                    "content": f"Generated a plan with {len(steps)} steps. Click the blue check box beside each step to complete it, click the x to remove this step.",
+                    "content": f"Generated a plan with {len(steps)} steps. Click the checkmark beside each step to complete it, click the x to reject this step.",
                     "source": AgentType.PLANNER.value,
                 },
             )

src/frontend/.env.sample

@@ -0,0 +1,13 @@
+# This is a sample .env file for the frontend application.
+
+API_URL=http://localhost:8000
+ENABLE_AUTH=false
+# VITE_APP_MSAL_AUTH_CLIENTID=""
+# VITE_APP_MSAL_AUTH_AUTHORITY=""
+# VITE_APP_MSAL_REDIRECT_URL="/"
+# VITE_APP_MSAL_POST_REDIRECT_URL="/"
+# REACT_APP_MSAL_AUTH_CLIENTID=""
+# REACT_APP_MSAL_AUTH_AUTHORITY=""
+# REACT_APP_MSAL_REDIRECT_URL="/"
+# REACT_APP_MSAL_POST_REDIRECT_URL="/"
+

src/frontend/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    root: true,
+    extends: [
+        'react-app',
+        'react-app/jest',
+        'plugin:react/recommended',
+    ],
+    plugins: ['react', '@typescript-eslint'],
+    parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    settings: {
+        react: {
+            version: 'detect'
+        }
+    },
+    rules: {
+        // Add custom rules here
+        'react/react-in-jsx-scope': 'off', // Not needed in React 17+
+    }
+};

src/frontend/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Vite
+.vite/
+*.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*