The quota check has failed, and the pipeline cannot proceed.
Build URL: ${RUN_URL}
Please take necessary action.
Best regards,
Your Automation Team
We would like to inform you that the Multi-Agent-Custom-Automation-Engine-Solution-Accelerator Automation process has encountered an issue and has failed to complete successfully.
Build URL: ${RUN_URL}
${OUTPUT}
Please investigate the matter at your earliest convenience.
Best regards,
Your Automation Team
The quota check has failed, and the pipeline cannot proceed.
Build URL: ${RUN_URL}
Please take necessary action.
Best regards,
Your Automation Team
We would like to inform you that the Multi-Agent-Custom-Automation-Engine-Solution-Accelerator Automation process has encountered an issue and has failed to complete successfully.
Build URL: ${RUN_URL}
${OUTPUT}
Please investigate the matter at your earliest convenience.
Best regards,
Your Automation Team
We would like to inform you that the ${{ env.accelerator_name }} Test Automation process has completed successfully.
Run URL: ${RUN_URL}
Test Report: ${REPORT_URL}
Best regards,
Your Automation Team
We would like to inform you that the ${{ env.accelerator_name }} Test Automation process has encountered an issue and has failed to complete successfully.
Run URL: ${RUN_URL}
Test Report: ${REPORT_URL}
Please investigate the matter at your earliest convenience.
Best regards,
Your Automation Team
-
-User story
-
-
-### Overview
-
-Problem:
-Agentic AI systems are set to transform the way businesses operate, however it can be fairly complex to build an initial MVP to demonstrate this value.
+When dealing with complex organizational tasks, users often face significant challenges, including coordinating across multiple departments, maintaining consistency in processes, and ensuring efficient resource utilization.
-Solution:
-The Multi-Agent -Custom Automation Engine Solution Accelerator provides a ready to go application to use as the base of the MVP, or as a reference, allowing you to hit the ground running.
+The Multi-Agent Custom Automation Engine solution accelerator allows users to specify tasks and have them automatically processed by a group of AI agents, each specialized in different aspects of the business. This automation not only saves time but also ensures accuracy and consistency in task execution.
-### Technology Note
-This accelerator uses the AutoGen framework from Microsoft Research. This is an open source project that is maintained by [Microsoft Researchβs AI Frontiers Lab](https://www.microsoft.com/research/lab/ai-frontiers/). Please see this [blog post](https://devblogs.microsoft.com/autogen/microsofts-agentic-frameworks-autogen-and-semantic-kernel/) for the latest information on using the AutoGen framework in production solutions.
+-### Use cases / scenarios -The multi-agent approach allows users to utilize multiple AI agents simultaneously for repeatable tasks, ensuring consistency and efficiency. -The agents collaborate with a manager on various assignments for onboarding a new employee , such as HR and tech support AI working together to set up software accounts, configure hardware, schedule onboarding meetings, register employees for benefits, and send welcome emails. Additionally, these agents can handle tasks like procurement and drafting press releases. +
+
+[**SOLUTION OVERVIEW**](#solution-overview) \| [**QUICK DEPLOY**](#quick-deploy) \| [**BUSINESS SCENARIO**](#business-scenario) \| [**SUPPORTING DOCUMENTATION**](#supporting-documentation)
-### Business value
-Multi-agent systems represent the next wave of Generative AI use cases, offering entirely new opportunities to drive efficiencies in your business. The Multi-Agent -Custom Automation Engine Solution Accelerator demonstrates several key benefits:
+
+-- **Allows people to focus on what matters:** by doing the heavy lifting involved with coordinating activities across an organization, peoplesβ time is freed up to focus on their specializations. -- **Enabling GenAI to scale:** by not needing to build one application after another, organizations are able to reduce the friction of adopting GenAI across their entire organization. One capability can unlock almost unlimited use cases. -- **Applicable to most industries:** these are common challenges that most organizations face, across most industries. +
+Solution overview
+
-Whilst still an emerging area, investing in agentic use cases, digitatization and developing tools will be key to ensuring you are able to leverage these new technologies and seize the GenAI moment.
+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.
-### Technical key features
+### Solution architecture
+||
+|---|
-This application is an AI-driven orchestration system that manages a group of AI agents to accomplish tasks based on user input. It uses a FastAPI backend to handle HTTP requests, processes them through various specialized agents, and stores stateful information using Azure Cosmos DB. The system is designed to:
+### Agentic architecture
+||
+|---|
-- Receive input tasks from users.
-- Generate a detailed plan to accomplish the task using a Planner agent.
-- Execute the plan by delegating steps to specialized agents (e.g., HR, Procurement, Marketing).
-- Incorporate human feedback into the workflow.
-- Maintain state across sessions with persistent storage.
+### How to customize
+If you'd like to customize the solution accelerator, here are some common areas to start:
-This system is intended for developing and deploying custom AI solutions for specific customers. This code has not been tested as an end-to-end, reliable production application- it is a foundation to help accelerate building out multi-agent systems. You are encouraged to add your own data and functions to the agents, and then you must apply your own performance and safety evaluation testing frameworks to this system before deploying it.
+[Custom scenario](./docs/CustomizeSolution.md)
-\
-
++### Additional resources +[Semantic Kernel Documentation](https://learn.microsoft.com/en-us/semantic-kernel/) -### Products used/licenses required +[Azure AI Foundry Documentation](https://learn.microsoft.com/en-us/azure/ai-foundry/) -- Azure Container Application +[Azure Container App documentation](https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-custom-container?tabs=core-tools%2Cacr%2Cazure-cli2%2Cazure-cli&pivots=container-apps) -- Azure OpenAI +
-- Azure Cosmos DB +### Key features +
+
+ By doing the heavy lifting involved with coordinating activities across an organization, people's time is freed up to focus on their specializations. + + - **Enabling GenAI to scale**
+ By not needing to build one application after another, organizations are able to reduce the friction of adopting GenAI across their entire organization. One capability can unlock almost unlimited use cases. -### Solution accelerator architecture - + - **Applicable to most industries**
+ These are common challenges that most organizations face, across most industries. + - **Efficient task automation**
+ Streamlining the process of analyzing, planning, and executing complex tasks reduces time and effort required to complete organizational processes. +
+Click to learn more about the key features this solution enables
-- The user deploying the template must have permission to create - resources and resource groups. + - **Allows people to focus on what matters**+ By doing the heavy lifting involved with coordinating activities across an organization, people's time is freed up to focus on their specializations. + + - **Enabling GenAI to scale**
+ By not needing to build one application after another, organizations are able to reduce the friction of adopting GenAI across their entire organization. One capability can unlock almost unlimited use cases. -### Solution accelerator architecture - + - **Applicable to most industries**
+ These are common challenges that most organizations face, across most industries. + - **Efficient task automation**
+ Streamlining the process of analyzing, planning, and executing complex tasks reduces time and effort required to complete organizational processes. +
+
+Quick deploy
+
-### **How to install/deploy**
+### How to install or deploy
+Follow the quick deploy steps on the deployment guide to deploy this solution to your own Azure subscription.
-This guide provides step-by-step instructions for deploying your application using Azure Container Registry (ACR) and Azure Container Apps.
+[Click here to launch the deployment guide](./docs/DeploymentGuide.md)
+-There are several ways to deploy the solution. You can deploy to run in Azure in one click, or manually, or you can deploy locally. +| [](https://codespaces.new/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator) | [](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator) | +|---|---| + +
-## One Click Azure Deployment +> β οΈ **Important: Check Azure OpenAI Quota Availability** +
To ensure sufficient quota is available in your subscription, please follow [quota check instructions guide](./docs/quota_check.md) before you deploy the solution. -
-[](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fmicrosoft%2FMulti-Agent-Custom-Automation-Engine-Solution-Accelerator%2Frefs%2Fheads%2Fmain%2Fdeploy%2Fmacae-continer-oc.json) +### Prerequisites and Costs -When Deployment is complete, follow steps in [Set Up Authentication in Azure App Service](./documentation/azure_app_service_auth_setup.md) to add app authentication to your web app running on Azure App Service +To deploy this solution accelerator, ensure you have access to an [Azure subscription](https://azure.microsoft.com/free/) with the necessary permissions to create **resource groups and resources**. Follow the steps in [Azure Account Set Up](./docs/AzureAccountSetUp.md). -## Local Deployment -To run the solution site and API backend locally, See the [local deployment guide](./documentation/LocalDeployment.md). +Check the [Azure Products by Region](https://azure.microsoft.com/en-us/explore/global-infrastructure/products-by-region/table) page and select a **region** where the following services are available: Azure OpenAI Service, Azure AI Search, and Azure Semantic Search. -## Manual Azure Deployment -### Prerequisites +Here are some example regions where the services are available: East US, East US2, Japan East, UK South, Sweden Central. -- Azure CLI installed -- Azure account with appropriate permissions -- Docker installed -- Azure Container Registry installed +Pricing varies per region and usage, so it isn't possible to predict exact costs for your usage. The majority of the Azure resources used in this infrastructure are on usage-based pricing tiers. However, Azure Container Registry has a fixed cost per registry per day. -### Get Admin Credentials from ACR +Use the [Azure pricing calculator](https://azure.microsoft.com/en-us/pricing/calculator) to calculate the cost of this solution in your subscription. [Review a sample pricing sheet for the architecture](https://azure.com/e/86d0eefbe4dd4a23981c1d3d4f6fe7ed). +| Product | Description | Cost | +|---|---|---| +| [Azure OpenAI Service](https://learn.microsoft.com/azure/ai-services/openai/) | Powers the AI agents for task automation | [Pricing](https://azure.microsoft.com/pricing/details/cognitive-services/openai-service/) | +| [Azure Container Apps](https://learn.microsoft.com/azure/container-apps/) | Hosts the web application frontend | [Pricing](https://azure.microsoft.com/pricing/details/container-apps/) | +| [Azure Cosmos DB](https://learn.microsoft.com/azure/cosmos-db/) | Stores metadata and processing results | [Pricing](https://azure.microsoft.com/pricing/details/cosmos-db/) | +| [Azure Container Registry](https://learn.microsoft.com/azure/container-registry/) | Stores container images for deployment | [Pricing](https://azure.microsoft.com/pricing/details/container-registry/) | -Retrieve the admin credentials for your Azure Container Registry (ACR): +
-```sh -az acr credential show \ ---name acrcontoso7wx5mg43sbnl4 \ ---resource-group rg-ssattiraju -``` +>β οΈ **Important:** To avoid unnecessary costs, remember to take down your app if it's no longer in use, +either by deleting the resource group in the Portal or running `azd down`. -### Login to ACR +
+
+Business Scenario
+
-Login to your Azure Container Registry:
+||
+|---|
-```sh
-az acr login --name acrcontoso7wx5mg43sbnl4
-```
+-### Build Image +Companies maintaining and modernizing their business processes often face challenges in coordinating complex tasks across multiple departments. They may have various processes that need to be automated and coordinated efficiently. Some of the challenges they face include: -Build the Docker image and push it to your Azure Container Registry: +- Difficulty coordinating activities across different departments +- Time-consuming process to manually manage complex workflows +- High risk of errors from manual coordination, which can lead to process inefficiencies +- Lack of available resources to handle increasing automation demands -```sh -az acr build \ ---registry acrcontoso7wx5mg43sbnl4 \ ---resource-group rg-name \ ---image macae:latest . -``` +By using the *Multi-Agent Custom Automation Engine* solution accelerator, users can automate these processes, ensuring that all tasks are accurately coordinated and executed efficiently. -### List the Image Created +### Business value +
+
+ Automate the coordination of complex tasks, significantly reducing processing time and effort. -```sh -az acr repository list --name acrcontoso7wx5mg43sbnl4 -``` + - **Error Reduction**
+ Multi-agent validation ensures accurate task execution and maintains process integrity. -### Upgrade Container App Extension + - **Resource Optimization**
+ Better utilization of human resources by focusing on specialized tasks. -Ensure you have the latest version of the Azure Container Apps extension: -`az extension add --name containerapp --upgrade` + - **Cost Efficiency**
+ Reduces manual coordination efforts and improves overall process efficiency. -### Get List of Available Locations + - **Scalability**
+ Enables organizations to handle increasing automation demands without proportional resource increases. -Retrieve a list of available Azure locations: -`az account list-locations -o table` +
-### Create Apps Environment
+Click to learn more about what value this solution provides
-List the images in your Azure Container Registry: + - **Process Efficiency**+ Automate the coordination of complex tasks, significantly reducing processing time and effort. -```sh -az acr repository list --name acrcontoso7wx5mg43sbnl4 -``` + - **Error Reduction**
+ Multi-agent validation ensures accurate task execution and maintains process integrity. -### Upgrade Container App Extension + - **Resource Optimization**
+ Better utilization of human resources by focusing on specialized tasks. -Ensure you have the latest version of the Azure Container Apps extension: -`az extension add --name containerapp --upgrade` + - **Cost Efficiency**
+ Reduces manual coordination efforts and improves overall process efficiency. -### Get List of Available Locations + - **Scalability**
+ Enables organizations to handle increasing automation demands without proportional resource increases. -Retrieve a list of available Azure locations: -`az account list-locations -o table` +
-Create an environment for your Azure Container Apps: +
+Supporting documentation
+
-```sh
-az containerapp env create \
---name python-container-env \
---resource-group rg-name \
---location southeastasia
-```
+### Security guidelines
-### Get Credentials
+This template uses Azure Key Vault to store all connections to communicate between resources.
-```sh
-az acr credential show -n acrcontoso7wx5mg43sbnl4
-```
+This template also uses [Managed Identity](https://learn.microsoft.com/entra/identity/managed-identities-azure-resources/overview) for local development and deployment.
-### Create container app
+To ensure continued best practices in your own repository, we recommend that anyone creating solutions based on our templates ensure that the [Github secret scanning](https://docs.github.com/code-security/secret-scanning/about-secret-scanning) setting is enabled.
-create the container app with the config
+You may want to consider additional security measures, such as:
-```sh
-az containerapp create \
- --name python-container-app \
- --resource-group rg-name \
- --image acrcontoso7wx5mg43sbnl4.azurecr.io/macae:latest \
- --environment python-container-env \
- --ingress external --target-port 8000 \
- --registry-server acrcontoso7wx5mg43sbnl4.azurecr.io \
- --registry-username password \
- --registry-password REGISTRY_PASSWORD \
- --query properties.configuration.ingress.fqdn
+* Enabling Microsoft Defender for Cloud to [secure your Azure resources](https://learn.microsoft.com/en-us/azure/defender-for-cloud/).
+* Protecting the Azure Container Apps instance with a [firewall](https://learn.microsoft.com/azure/container-apps/waf-app-gateway) and/or [Virtual Network](https://learn.microsoft.com/azure/container-apps/networking?tabs=workload-profiles-env%2Cazure-cli).
-```
--## Supporting documentation +
+### Cross references +Check out similar solution accelerators -### +| Solution Accelerator | Description | +|---|---| +| [Document Knowledge Mining](https://github.com/microsoft/Document-Knowledge-Mining-Solution-Accelerator) | Extract structured information from unstructured documents using AI | +| [Modernize your Code](https://github.com/microsoft/Modernize-your-Code-Solution-Accelerator) | Automate the translation of SQL queries between different dialects | +| [Conversation Knowledge Mining](https://github.com/microsoft/Conversation-Knowledge-Mining-Solution-Accelerator) | Enable organizations to derive insights from volumes of conversational data using generative AI | -### How to customize +
-This solution is designed to be easily customizable. You can modify the front end site, or even build your own front end and attach to the backend API. You can further customize the backend by adding your own agents with their own specific capabilities. Deeper technical information to aid in this customization can be found in this [document](./documentation/CustomizeSolution.md). +## Provide feedback -### Additional resources +Have questions, find a bug, or want to request a feature? [Submit a new issue](https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator/issues) on this repo and we'll connect. -- [Python FastAPI documentation](https://fastapi.tiangolo.com/learn/) -- [AutoGen Framework Documentation](https://microsoft.github.io/autogen/dev/user-guide/core-user-guide/index.html) -- [Azure Container App documentation](https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-custom-container?tabs=core-tools%2Cacr%2Cazure-cli2%2Cazure-cli&pivots=container-apps) -- [Azure OpenAI Service - Documentation, quickstarts, API reference - Azure AI services | Microsoft Learn](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/use-your-data) -- [Azure Cosmos DB documentation](https://learn.microsoft.com/en-us/azure/cosmos-db/) - +
-
-
-Customer truth
-
-Customer stories coming soon.
+## Responsible AI Transparency FAQ
+Please refer to [Transparency FAQ](./docs/TRANSPARENCY_FAQ.md) for responsible AI transparency details of this solution accelerator.
-
-
- ---- ## Disclaimers -To the extent that the Software includes components or code used in or derived from Microsoft products or services, including without limitation Microsoft Azure Services (collectively, βMicrosoft Products and Servicesβ), you must also comply with the Product Terms applicable to such Microsoft Products and Services. You acknowledge and agree that the license governing the Software does not grant you a license or other right to use Microsoft Products and Services. Nothing in the license or this ReadMe file will serve to supersede, amend, terminate or modify any terms in the Product Terms for any Microsoft Products and Services. +To the extent that the Software includes components or code used in or derived from Microsoft products or services, including without limitation Microsoft Azure Services (collectively, "Microsoft Products and Services"), you must also comply with the Product Terms applicable to such Microsoft Products and Services. You acknowledge and agree that the license governing the Software does not grant you a license or other right to use Microsoft Products and Services. Nothing in the license or this ReadMe file will serve to supersede, amend, terminate or modify any terms in the Product Terms for any Microsoft Products and Services. You must also comply with all domestic and international export laws and regulations that apply to the Software, which include restrictions on destinations, end users, and end use. For further information on export restrictions, visit https://aka.ms/exporting. -You acknowledge that the Software and Microsoft Products and Services (1) are not designed, intended or made available as a medical device(s), and (2) are not designed or intended to be a substitute for professional medical advice, diagnosis, treatment, or judgment and should not be used to replace or as a substitute for professional medical advice, diagnosis, treatment, or judgment. Customer is solely responsible for displaying and/or obtaining appropriate consents, warnings, disclaimers, and acknowledgements to end users of Customerβs implementation of the Online Services. +You acknowledge that the Software and Microsoft Products and Services (1) are not designed, intended or made available as a medical device(s), and (2) are not designed or intended to be a substitute for professional medical advice, diagnosis, treatment, or judgment and should not be used to replace or as a substitute for professional medical advice, diagnosis, treatment, or judgment. Customer is solely responsible for displaying and/or obtaining appropriate consents, warnings, disclaimers, and acknowledgements to end users of Customer's implementation of the Online Services. -You acknowledge the Software is not subject to SOC 1 and SOC 2 compliance audits. No Microsoft technology, nor any of its component technologies, including the Software, is intended or made available as a substitute for the professional advice, opinion, or judgement of a certified financial services professional. Do not use the Software to replace, substitute, or provide professional financial advice or judgment. +You acknowledge the Software is not subject to SOC 1 and SOC 2 compliance audits. No Microsoft technology, nor any of its component technologies, including the Software, is intended or made available as a substitute for the professional advice, opinion, or judgment of a certified financial services professional. Do not use the Software to replace, substitute, or provide professional financial advice or judgment. -BY ACCESSING OR USING THE SOFTWARE, YOU ACKNOWLEDGE THAT THE SOFTWARE IS NOT DESIGNED OR INTENDED TO SUPPORT ANY USE IN WHICH A SERVICE INTERRUPTION, DEFECT, ERROR, OR OTHER FAILURE OF THE SOFTWARE COULD RESULT IN THE DEATH OR SERIOUS BODILY INJURY OF ANY PERSON OR IN PHYSICAL OR ENVIRONMENTAL DAMAGE (COLLECTIVELY, βHIGH-RISK USEβ), AND THAT YOU WILL ENSURE THAT, IN THE EVENT OF ANY INTERRUPTION, DEFECT, ERROR, OR OTHER FAILURE OF THE SOFTWARE, THE SAFETY OF PEOPLE, PROPERTY, AND THE ENVIRONMENT ARE NOT REDUCED BELOW A LEVEL THAT IS REASONABLY, APPROPRIATE, AND LEGAL, WHETHER IN GENERAL OR IN A SPECIFIC INDUSTRY. BY ACCESSING THE SOFTWARE, YOU FURTHER ACKNOWLEDGE THAT YOUR HIGH-RISK USE OF THE SOFTWARE IS AT YOUR OWN RISK. +BY ACCESSING OR USING THE SOFTWARE, YOU ACKNOWLEDGE THAT THE SOFTWARE IS NOT DESIGNED OR INTENDED TO SUPPORT ANY USE IN WHICH A SERVICE INTERRUPTION, DEFECT, ERROR, OR OTHER FAILURE OF THE SOFTWARE COULD RESULT IN THE DEATH OR SERIOUS BODILY INJURY OF ANY PERSON OR IN PHYSICAL OR ENVIRONMENTAL DAMAGE (COLLECTIVELY, "HIGH-RISK USE"), AND THAT YOU WILL ENSURE THAT, IN THE EVENT OF ANY INTERRUPTION, DEFECT, ERROR, OR OTHER FAILURE OF THE SOFTWARE, THE SAFETY OF PEOPLE, PROPERTY, AND THE ENVIRONMENT ARE NOT REDUCED BELOW A LEVEL THAT IS REASONABLY, APPROPRIATE, AND LEGAL, WHETHER IN GENERAL OR IN A SPECIFIC INDUSTRY. BY ACCESSING THE SOFTWARE, YOU FURTHER ACKNOWLEDGE THAT YOUR HIGH-RISK USE OF THE SOFTWARE IS AT YOUR OWN RISK. diff --git a/TRANSPARENCY_FAQS.md b/TRANSPARENCY_FAQS.md index 3469f5258..8eae97ccf 100644 --- a/TRANSPARENCY_FAQS.md +++ b/TRANSPARENCY_FAQS.md @@ -1,4 +1,4 @@ -# Multi-Agent: Custom Automation Engine β Solution Accelerator : Responsible AI FAQ +# Multi-Agent-Custom-Automation-Engine β Solution Accelerator : Responsible AI FAQ ## What is the Multi Agent: Custom Automation Engine β Solution Accelerator? Multi Agent: Custom Automation Engine β Solution Accelerator is an open-source GitHub Repository that enables users to solve complex tasks using multiple agents. The accelerator is designed to be generic across business tasks. The user enters a task and a planning LLM formulates a plan to complete that task. The system then dynamically generates agents which can complete the task. The system also allows the user to create actions that agents can take (for example sending emails or scheduling orientation sessions for new employees). These actions are taken into account by the planner and dynamically created agents may be empowered to take these actions. @@ -14,7 +14,6 @@ The evaluation process includes human review of the outputs, and tuned LLM promp ## What are the limitations of Multi Agent: Custom Automation Engine β Solution Accelerator? How can users minimize the impact Multi Agent: Custom Automation Engine β Solution Acceleratorβs limitations when using the system? The system allows users to review, reorder and approve steps generated in a plan, ensuring human oversight. The system uses function calling with LLMs to perform actions, users can approve or modify these actions. Users of the accelerator should review the system prompts provided and update as per their organizational guidance. Users should run their own evaluation flow either using the guidance provided in the GitHub repository or their choice of evaluation methods. -Note that the Multi Agent: Custom Automation Engine β Solution Accelerator relies on the AutoGen Multi Agent framework. AutoGen has published their own [list of limitations and impacts](https://github.com/microsoft/autogen/blob/gaia_multiagent_v01_march_1st/TRANSPARENCY_FAQS.md#what-are-the-limitations-of-autogen-how-can-users-minimize-the-impact-of-autogens-limitations-when-using-the-system). ## What operational factors and settings allow for effective and responsible use of Multi Agent: Custom Automation Engine β Solution Accelerator? Effective and responsible use of the Multi Agent: Custom Automation Engine β Solution Accelerator depends on several operational factors and settings. The system is designed to perform reliably and safely across a range of business tasks that it was evaluated for. Users can customize certain settings, such as the planning language model used by the system, the types of tasks that agents are assigned, and the specific actions that agents can take (e.g., sending emails or scheduling orientation sessions for new employees). However, it's important to note that these choices may impact the system's behavior in real-world scenarios. diff --git a/__azurite_db_queue__.json b/__azurite_db_queue__.json new file mode 100644 index 000000000..a4fcc30da --- /dev/null +++ b/__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"} \ No newline at end of file diff --git a/__azurite_db_queue_extent__.json b/__azurite_db_queue_extent__.json new file mode 100644 index 000000000..888954057 --- /dev/null +++ b/__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"} \ No newline at end of file diff --git a/azure.yaml b/azure.yaml new file mode 100644 index 000000000..26522f5db --- /dev/null +++ b/azure.yaml @@ -0,0 +1,6 @@ +# yaml-language-server: $schema=https://raw.githubusercontent.com/Azure/azure-dev/main/schemas/v1.0/azure.yaml.json +name: multi-agent-custom-automation-engine-solution-accelerator +metadata: + template: multi-agent-custom-automation-engine-solution-accelerator@1.0 +requiredVersions: + azd: ">=1.15.0 !=1.17.1" \ No newline at end of file diff --git a/deploy/macae.bicep b/deploy/macae.bicep deleted file mode 100644 index 4ffb6b8fe..000000000 --- a/deploy/macae.bicep +++ /dev/null @@ -1,378 +0,0 @@ -@description('Location for all resources.') -param location string = 'EastUS2' //Fixed for model availability, change back to resourceGroup().location - -@description('Location for OpenAI resources.') -param azureOpenAILocation string = 'EastUS' //Fixed for model availability - -@description('A prefix to add to the start of all resource names. Note: A "unique" suffix will also be added') -param prefix string = 'macae' - -@description('The container image name and tag to deploy to the backend container app, if this is not set the container app just default to an empty image') -param backendContainerImageNameTag string = '' - -@description('The container image name and tag for the frontend application, if this is not set the container app just default to an empty image') -param frontendContainerImageNameTag string = '' - -@secure() -@description('The visitor code/password that must be provided to access the container app. If left as-is, a new password will be generated and output. If this is set to empty a new code will be generated on each restart.') -param visitorPassword string = base64(newGuid()) - -@description('Tags to apply to all deployed resources') -param tags object = {} - -@description('The size of the resources to deploy, defaults to a mini size') -param resourceSize { - gpt4oCapacity: int - cosmosThroughput: int - containerAppSize: { - cpu: string - memory: string - minReplicas: int - maxReplicas: int - } -} = { - gpt4oCapacity: 15 - cosmosThroughput: 400 - containerAppSize: { - cpu: '1.0' - memory: '2.0Gi' - minReplicas: 0 - maxReplicas: 1 - } -} - -var uniqueNameFormat = '${prefix}-{0}-${uniqueString(resourceGroup().id, prefix)}' -var uniqueShortNameFormat = '${toLower(prefix)}{0}${uniqueString(resourceGroup().id, prefix)}' -var aoaiApiVersion = '2024-08-01-preview' -var emptyContainerImage = 'alpine:latest' -param frontendSiteName string = '${prefix}-frontend-${uniqueString(resourceGroup().id)}' - -resource logAnalytics 'Microsoft.OperationalInsights/workspaces@2023-09-01' = { - name: format(uniqueNameFormat, 'logs') - location: location - tags: tags - properties: { - retentionInDays: 30 - sku: { - name: 'PerGB2018' - } - } -} - -resource appInsights 'Microsoft.Insights/components@2020-02-02-preview' = { - name: format(uniqueNameFormat, 'appins') - location: location - kind: 'web' - properties: { - Application_Type: 'web' - WorkspaceResourceId: logAnalytics.id - } -} - -resource openai 'Microsoft.CognitiveServices/accounts@2023-10-01-preview' = { - name: format(uniqueNameFormat, 'openai') - location: azureOpenAILocation - tags: tags - kind: 'OpenAI' - sku: { - name: 'S0' - } - properties: { - customSubDomainName: format(uniqueNameFormat, 'openai') - } - resource gpt4o 'deployments' = { - name: 'gpt-4o' - sku: { - name: 'GlobalStandard' - capacity: resourceSize.gpt4oCapacity - } - properties: { - model: { - format: 'OpenAI' - name: 'gpt-4o' - version: '2024-08-06' - } - versionUpgradeOption: 'NoAutoUpgrade' - } - } -} - -resource aoaiUserRoleDefinition 'Microsoft.Authorization/roleDefinitions@2022-05-01-preview' existing = { - name: '5e0bd9bd-7b93-4f28-af87-19fc36ad61bd' //'Cognitive Services OpenAI User' -} - -resource acaAoaiRoleAssignment 'Microsoft.Authorization/roleAssignments@2022-04-01' = { - name: guid(containerApp.id, openai.id, aoaiUserRoleDefinition.id) - scope: openai - properties: { - principalId: containerApp.identity.principalId - roleDefinitionId: aoaiUserRoleDefinition.id - principalType: 'ServicePrincipal' - } -} - -resource cosmos 'Microsoft.DocumentDB/databaseAccounts@2024-05-15' = { - name: format(uniqueNameFormat, 'cosmos') - location: location - tags: tags - kind: 'GlobalDocumentDB' - properties: { - databaseAccountOfferType: 'Standard' - enableFreeTier: false - locations: [ - { - failoverPriority: 0 - locationName: location - } - ] - } - - resource contributorRoleDefinition 'sqlRoleDefinitions' existing = { - name: '00000000-0000-0000-0000-000000000002' - } - - resource autogenDb 'sqlDatabases' = { - name: 'autogen' - properties: { - resource: { - id: 'autogen' - createMode: 'Default' - } - options: { - throughput: resourceSize.cosmosThroughput - } - } - - resource memoryContainer 'containers' = { - name: 'memory' - properties: { - resource: { - id: 'memory' - partitionKey: { - kind: 'Hash' - version: 2 - paths: [ - '/session_id' - ] - } - } - } - } - } -} - -resource acr 'Microsoft.ContainerRegistry/registries@2023-11-01-preview' = { - name: format(uniqueShortNameFormat, 'acr') - location: location - sku: { - name: 'Standard' - } - properties: { - adminUserEnabled: true // Add this line - } -} - -resource pullIdentity 'Microsoft.ManagedIdentity/userAssignedIdentities@2023-07-31-preview' = { - name: format(uniqueNameFormat, 'containerapp-pull') - location: location -} - -resource acrPullDefinition 'Microsoft.Authorization/roleDefinitions@2022-05-01-preview' existing = { - name: '7f951dda-4ed3-4680-a7ca-43fe172d538d' //'AcrPull' -} - -resource roleAssignment 'Microsoft.Authorization/roleAssignments@2022-04-01' = { - name: guid(acr.id, pullIdentity.id, acrPullDefinition.id) - properties: { - principalId: pullIdentity.properties.principalId - principalType: 'ServicePrincipal' - roleDefinitionId: acrPullDefinition.id - } -} - -resource containerAppEnv 'Microsoft.App/managedEnvironments@2024-03-01' = { - name: format(uniqueNameFormat, 'containerapp') - location: location - tags: tags - properties: { - daprAIConnectionString: appInsights.properties.ConnectionString - appLogsConfiguration: { - destination: 'log-analytics' - logAnalyticsConfiguration: { - customerId: logAnalytics.properties.customerId - sharedKey: logAnalytics.listKeys().primarySharedKey - } - } - } - resource aspireDashboard 'dotNetComponents@2024-02-02-preview' = { - name: 'aspire-dashboard' - properties: { - componentType: 'AspireDashboard' - } - } -} - -resource acaCosomsRoleAssignment 'Microsoft.DocumentDB/databaseAccounts/sqlRoleAssignments@2024-05-15' = { - name: guid(containerApp.id, cosmos::contributorRoleDefinition.id) - parent: cosmos - properties: { - principalId: containerApp.identity.principalId - roleDefinitionId: cosmos::contributorRoleDefinition.id - scope: cosmos.id - } -} - -resource containerApp 'Microsoft.App/containerApps@2024-03-01' = { - name: '${prefix}-backend' - location: location - tags: tags - identity: { - type: 'SystemAssigned,UserAssigned' - userAssignedIdentities: { - '${pullIdentity.id}': {} - } - } - properties: { - managedEnvironmentId: containerAppEnv.id - configuration: { - ingress: { - targetPort: 8000 - external: true - } - activeRevisionsMode: 'Single' - registries: [ - { - server: acr.properties.loginServer - identity: pullIdentity.id - } - ] - } - template: { - scale: { - minReplicas: resourceSize.containerAppSize.minReplicas - maxReplicas: resourceSize.containerAppSize.maxReplicas - rules: [ - { - name: 'http-scaler' - http: { - metadata: { - concurrentRequests: '100' - } - } - } - ] - } - containers: [ - { - name: 'backend' - image: empty(trim(backendContainerImageNameTag )) - ? emptyContainerImage - : '${acr.properties.loginServer}/${backendContainerImageNameTag }' - resources: { - cpu: json(resourceSize.containerAppSize.cpu) - memory: resourceSize.containerAppSize.memory - } - env: [ - { - name: 'COSMOSDB_ENDPOINT' - value: cosmos.properties.documentEndpoint - } - { - name: 'COSMOSDB_DATABASE' - value: cosmos::autogenDb.name - } - { - name: 'COSMOSDB_CONTAINER' - value: cosmos::autogenDb::memoryContainer.name - } - { - name: 'AZURE_OPENAI_ENDPOINT' - value: openai.properties.endpoint - } - { - name: 'AZURE_OPENAI_DEPLOYMENT_NAME' - value: openai::gpt4o.name - } - { - name: 'AZURE_OPENAI_API_VERSION' - value: aoaiApiVersion - } - { - name: 'VISITOR_PASSWORD' - value: visitorPassword - } - { - name: 'FRONTEND_SITE_NAME' - value: 'https://${frontendSiteName}.azurewebsites.net' - } - ] - } - ] - } - } -} - -resource frontendAppServicePlan 'Microsoft.Web/serverfarms@2021-02-01' = { - name: '${prefix}-frontend-plan-${uniqueString(resourceGroup().id)}' - location: location - tags: tags - sku: { - name: 'P1v2' - capacity: 1 - tier: 'PremiumV2' - } - properties: { - reserved: true - } - kind: 'linux' // Add this line to support Linux containers -} - -resource frontendAppService 'Microsoft.Web/sites@2021-02-01' = { - name: frontendSiteName - location: location - tags: tags - kind: 'app,linux,container' // Add this line - properties: { - serverFarmId: frontendAppServicePlan.id - reserved: true - siteConfig: { - linuxFxVersion:'DOCKER|nginx:latest' - appSettings: [ - { - name: 'DOCKER_REGISTRY_SERVER_URL' - value: 'https://${acr.properties.loginServer}' - } - { - name: 'DOCKER_REGISTRY_SERVER_USERNAME' - value: acr.listCredentials().username - } - { - name: 'DOCKER_REGISTRY_SERVER_PASSWORD' - value: acr.listCredentials().passwords[0].value - } - { - name: 'WEBSITES_PORT' - value: '3000' - } - { - name: 'WEBSITES_CONTAINER_START_TIME_LIMIT' // Add startup time limit - value: '1800' // 30 minutes, adjust as needed - } - { - name: 'BACKEND_API_URL' - value: 'https://${containerApp.properties.configuration.ingress.fqdn}' - } - ] - } - } -} - -var backendBuildImageTag = 'backend:latest' -var frontendBuildImageTag = 'frontend:latest' - -output buildBackendCommand string = 'az acr build -r ${acr.name} -t ${acr.name}.azurecr.io/${backendBuildImageTag} ./macae/backend' -output runBackendCommand string = 'az containerapp update -n ${containerApp.name} -g ${resourceGroup().name} --image ${acr.properties.loginServer}/${backendBuildImageTag}' -output buildFrontendCommand string = 'az acr build -r ${acr.name} -t ${acr.name}.azurecr.io/${frontendBuildImageTag} ./macae/frontend' -output runFrontendCommand string = 'az webapp config container set --name ${frontendAppService.name} --resource-group ${resourceGroup().name} --docker-custom-image-name ${acr.properties.loginServer}/${frontendBuildImageTag} --docker-registry-server-url ${acr.properties.loginServer}' -output cosmosAssignCli string = 'az cosmosdb sql role assignment create --resource-group "${resourceGroup().name}" --account-name "${cosmos.name}" --role-definition-id "${cosmos::contributorRoleDefinition.id}" --scope "${cosmos.id}" --principal-id "fill-in"' -output backendApiUrl string = containerApp.properties.configuration.ingress.fqdn diff --git a/docs/AzureAccountSetUp.md b/docs/AzureAccountSetUp.md new file mode 100644 index 000000000..22ffa836f --- /dev/null +++ b/docs/AzureAccountSetUp.md @@ -0,0 +1,14 @@ +## Azure account setup + +1. Sign up for a [free Azure account](https://azure.microsoft.com/free/) and create an Azure Subscription. +2. Check that you have the necessary permissions: + * Your Azure account must have `Microsoft.Authorization/roleAssignments/write` permissions, such as [Role Based Access Control Administrator](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#role-based-access-control-administrator-preview), [User Access Administrator](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#user-access-administrator), or [Owner](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#owner). + * Your Azure account also needs `Microsoft.Resources/deployments/write` permissions on the subscription level. + +You can view the permissions for your account and subscription by following the steps below: +- Navigate to the [Azure Portal](https://portal.azure.com/) and click on `Subscriptions` under 'Navigation' +- Select the subscription you are using for this accelerator from the list. + - If you try to search for your subscription and it does not come up, make sure no filters are selected. +- Select `Access control (IAM)` and you can see the roles that are assigned to your account for this subscription. + - If you want to see more information about the roles, you can go to the `Role assignments` + tab and search by your account name and then click the role you want to view more information about. \ No newline at end of file diff --git a/docs/AzureGPTQuotaSettings.md b/docs/AzureGPTQuotaSettings.md new file mode 100644 index 000000000..a8f7d6c5b --- /dev/null +++ b/docs/AzureGPTQuotaSettings.md @@ -0,0 +1,10 @@ +## How to Check & Update Quota + +1. **Navigate** to the [Azure AI Foundry portal](https://ai.azure.com/). +2. **Select** the AI Project associated with this accelerator. +3. **Go to** the `Management Center` from the bottom-left navigation menu. +4. Select `Quota` + - Click on the `GlobalStandard` dropdown. + - Select the required **GPT model** (`GPT-4o`) + - Choose the **region** where the deployment is hosted. +5. Request More Quota or delete any unused model deployments as needed. diff --git a/docs/CustomizeSolution.md b/docs/CustomizeSolution.md new file mode 100644 index 000000000..160550a0f --- /dev/null +++ b/docs/CustomizeSolution.md @@ -0,0 +1,617 @@ +# Table of Contents + +- [Table of Contents](#table-of-contents) + - [Accelerating your own Multi-Agent - Custom Automation Engine MVP](#accelerating-your-own-multi-agent---custom-automation-engine-mvp) + - [Technical Overview](#technical-overview) + - [Adding a New Agent to the Multi-Agent System](#adding-a-new-agent-to-the-multi-agent-system) + - [API Reference](#api-reference) + - [Models and Datatypes](#models-and-datatypes) + - [Application Flow](#application-flow) + - [Agents Overview](#agents-overview) + - [Persistent Storage with Cosmos DB](#persistent-storage-with-cosmos-db) + - [Utilities](#utilities) + - [Summary](#summary) + + +# Accelerating your own Multi-Agent - Custom Automation Engine MVP + +As the name suggests, this project is designed to accelerate development of Multi-Agent solutions in your environment. The example solution presented shows how such a solution would be implemented and provides example agent definitions along with stubs for possible tools those agents could use to accomplish tasks. You will want to implement real functions in your own environment, to be used by agents customized around your own use cases. Users can choose the LLM that is optimized for responsible use. The default LLM is GPT-4o which inherits the existing responsible AI mechanisms and filters from the LLM provider. We encourage developers to review [OpenAIβs Usage policies](https://openai.com/policies/usage-policies/) and [Azure OpenAIβs Code of Conduct](https://learn.microsoft.com/en-us/legal/cognitive-services/openai/code-of-conduct) when using GPT-4o. This document is designed to provide the in-depth technical information to allow you to add these customizations. Once the agents and tools have been developed, you will likely want to implement your own real world front end solution to replace the example in this accelerator. + +## Technical Overview + +This application is an AI-driven orchestration system that manages a group of AI agents to accomplish tasks based on user input. It uses a FastAPI backend to handle HTTP requests, processes them through various specialized agents, and stores stateful information using Azure Cosmos DB. The system is designed to: + +- Receive input tasks from users. +- Generate a detailed plan to accomplish the task using a Planner agent. +- Execute the plan by delegating steps to specialized agents (e.g., HR, Procurement, Marketing). +- Incorporate human feedback into the workflow. +- Maintain state across sessions with persistent storage. + +This code has not been tested as an end-to-end, reliable production application- it is a foundation to help accelerate building out multi-agent systems. You are encouraged to add your own data and functions to the agents, and then you must apply your own performance and safety evaluation testing frameworks to this system before deploying it. + +Below, we'll dive into the details of each component, focusing on the endpoints, data types, and the flow of information through the system. +## Adding a New Agent to the Multi-Agent System + +This guide details the steps required to add a new agent to the Multi-Agent Custom Automation Engine. The process includes registering the agent, defining its capabilities through tools, and ensuring the PlannerAgent includes the new agent when generating activity plans. + +### **Step 1: Define the New Agent's Tools** +Every agent is equipped with a set of tools (functions) that it can call to perform specific tasks. These tools need to be defined first. + +1. **Create New Tools**: In a new or existing file, define the tools your agent will use. + + Example (for a `BakerAgent`): + ```python + from typing import List + + async def bake_cookies(cookie_type: str, quantity: int) -> str: + return f"Baked {quantity} {cookie_type} cookies." + + async def prepare_dough(dough_type: str) -> str: + return f"Prepared {dough_type} dough." + + def get_baker_tools() -> List[Tool]: + return [ + FunctionTool(bake_cookies, description="Bake cookies of a specific type.", name="bake_cookies"), + FunctionTool(prepare_dough, description="Prepare dough of a specific type.", name="prepare_dough"), + ] + ``` + + +2. **Implement the Agent Class** +Create a new agent class that inherits from `BaseAgent`. + +Example (for `BakerAgent`): +```python +from agents.base_agent import BaseAgent + +class BakerAgent(BaseAgent): + def __init__(self, model_client, session_id, user_id, memory, tools, agent_id): + super().__init__( + "BakerAgent", + model_client, + session_id, + user_id, + memory, + tools, + agent_id, + system_message="You are an AI Agent specialized in baking tasks.", + ) +``` +### **Step 2: Register the new Agent in the messages** +Update `messages.py` to include the new agent. + + ```python + class BAgentType(str, Enum): + baker_agent = "BakerAgent" +``` + +### **Step 3: Register the Agent in the Initialization Process** +Update the `initialize_runtime_and_context` function in `utils.py` to include the new agent. + +1. **Import new agent**: + ```python + from agents.baker_agent import BakerAgent, get_baker_tools + ``` + +2. **Add the bakers tools**: + ```python + baker_tools = get_baker_tools() + ``` + +3. **Generate Agent IDs**: + ```python + baker_agent_id = AgentId("baker_agent", session_id) + baker_tool_agent_id = AgentId("baker_tool_agent", session_id) + ``` + +4. **Register to ToolAgent**: + ```python + await ToolAgent.register( + runtime, + "baker_tool_agent", + lambda: ToolAgent("Baker tool execution agent", baker_tools), + ) + ``` + +5. **Register the Agent and ToolAgent**: + ```python + await BakerAgent.register( + runtime, + baker_agent_id.type, + lambda: BakerAgent( + aoai_model_client, + session_id, + user_id, + cosmos_memory, + get_baker_tools(), + baker_tool_agent_id, + ), + ) + ``` +6. **Add to agent_ids**: + ```python + agent_ids = { + BAgentType.baker_agent: baker_agent_id, + ``` +7. **Add to retrieve_all_agent_tools**: + ```python + def retrieve_all_agent_tools() -> List[Dict[str, Any]]: + baker_tools: List[Tool] = get_baker_tools() + ``` +8. **Append baker_tools to functions**: + ```python + for tool in baker_tools: + functions.append( + { + "agent": "BakerAgent", + "function": tool.name, + "description": tool.description, + "arguments": str(tool.schema["parameters"]["properties"]), + } + ) + ``` +### **Step 4: Update home page** +Update `src/frontend/wwwroot/home/home.html` adding new html block + +1. **Add a new UI element was added to allow users to request baking tasks from the BakerAgent** +```html +
+
+```
+### **Step 5: Update tasks**
+Update `src/frontend/wwwroot/task/task.js`
+
+1. **Add `BakerAgent` as a recognized agent type in the frontend JavaScript file**
+```js
+ case "BakerAgent":
+ agentIcon = "manager";
+ break;
+```
+### **Step 6: Validate the Integration**
+Deploy the updated system and ensure the new agent is properly included in the planning process. For example, if the user requests to bake cookies, the `PlannerAgent` should:
+
+- Identify the `BakerAgent` as the responsible agent.
+- Call `bake_cookies` or `prepare_dough` from the agent's toolset.
+
+### **Step 7: Update Documentation**
+Ensure that the system documentation reflects the addition of the new agent and its capabilities. Update the `README.md` and any related technical documentation to include information about the `BakerAgent`.
+
+### **Step 8: Testing**
+Thoroughly test the agent in both automated and manual scenarios. Verify that:
+
+- The agent responds correctly to tasks.
+- The PlannerAgent includes the new agent in relevant plans.
+- The agent's tools are executed as expected.
+
+Following these steps will successfully integrate a new agent into the Multi-Agent Custom Automation Engine.
+
+### API Reference
+To view the API reference, go to the API endpoint in a browser and add "/docs". This will bring up a full Swagger environment and reference documentation for the REST API included with this accelerator. For example, ```https://macae-backend.eastus2.azurecontainerapps.io/docs```.
+If you prefer ReDoc, this is available by appending "/redoc".
+
+
+
+### Models and Datatypes
+#### Models
+##### **`BaseDataModel`**
+The `BaseDataModel` is a foundational class for creating structured data models using Pydantic. It provides the following attributes:
+
+- **`id`**: A unique identifier for the data, generated using `uuid`.
+- **`ts`**: An optional timestamp indicating when the model instance was created or modified.
+
+#### **`AgentMessage`**
+The `AgentMessage` model represents communication between agents and includes the following fields:
+
+- **`id`**: A unique identifier for the message, generated using `uuid`.
+- **`data_type`**: A literal value of `"agent_message"` to identify the message type.
+- **`session_id`**: The session associated with this message.
+- **`user_id`**: The ID of the user associated with this message.
+- **`plan_id`**: The ID of the related plan.
+- **`content`**: The content of the message.
+- **`source`**: The origin or sender of the message (e.g., an agent).
+- **`ts`**: An optional timestamp for when the message was created.
+- **`step_id`**: An optional ID of the step associated with this message.
+
+#### **`Session`**
+The `Session` model represents a user session and extends the `BaseDataModel`. It has the following attributes:
+
+- **`data_type`**: A literal value of `"session"` to identify the type of data.
+- **`current_status`**: The current status of the session (e.g., `active`, `completed`).
+- **`message_to_user`**: An optional field to store any messages sent to the user.
+- **`ts`**: An optional timestamp for the session's creation or last update.
+
+
+#### **`Plan`**
+The `Plan` model represents a high-level structure for organizing actions or tasks. It extends the `BaseDataModel` and includes the following attributes:
+
+- **`data_type`**: A literal value of `"plan"` to identify the data type.
+- **`session_id`**: The ID of the session associated with this plan.
+- **`initial_goal`**: A description of the initial goal derived from the userβs input.
+- **`overall_status`**: The overall status of the plan (e.g., `in_progress`, `completed`, `failed`).
+
+#### **`Step`**
+The `Step` model represents a discrete action or task within a plan. It extends the `BaseDataModel` and includes the following attributes:
+
+- **`data_type`**: A literal value of `"step"` to identify the data type.
+- **`plan_id`**: The ID of the plan the step belongs to.
+- **`action`**: The specific action or task to be performed.
+- **`agent`**: The name of the agent responsible for executing the step.
+- **`status`**: The status of the step (e.g., `planned`, `approved`, `completed`).
+- **`agent_reply`**: An optional response from the agent after executing the step.
+- **`human_feedback`**: Optional feedback provided by a user about the step.
+- **`updated_action`**: Optional modified action based on human feedback.
+- **`session_id`**: The session ID associated with the step.
+- **`user_id`**: The ID of the user providing feedback or interacting with the step.
+
+#### **`PlanWithSteps`**
+The `PlanWithSteps` model extends the `Plan` model and includes additional information about the steps in the plan. It has the following attributes:
+
+- **`steps`**: A list of `Step` objects associated with the plan.
+- **`total_steps`**: The total number of steps in the plan.
+- **`completed_steps`**: The number of steps that have been completed.
+- **`pending_steps`**: The number of steps that are pending approval or completion.
+
+**Additional Features**:
+The `PlanWithSteps` model provides methods to update step counts:
+- `update_step_counts()`: Calculates and updates the `total_steps`, `completed_steps`, and `pending_steps` fields based on the associated steps.
+
+#### **`InputTask`**
+The `InputTask` model represents the userβs initial input for creating a plan. It includes the following attributes:
+
+- **`session_id`**: An optional string for the session ID. If not provided, a new UUID will be generated.
+- **`description`**: A string describing the task or goal the user wants to accomplish.
+- **`user_id`**: The ID of the user providing the input.
+
+#### **`ApprovalRequest`**
+The `ApprovalRequest` model represents a request to approve a step or multiple steps. It includes the following attributes:
+
+- **`step_id`**: An optional string representing the specific step to approve. If not provided, the request applies to all steps.
+- **`plan_id`**: The ID of the plan containing the step(s) to approve.
+- **`session_id`**: The ID of the session associated with the approval request.
+- **`approved`**: A boolean indicating whether the step(s) are approved.
+- **`human_feedback`**: An optional string containing comments or feedback from the user.
+- **`updated_action`**: An optional string representing a modified action based on feedback.
+- **`user_id`**: The ID of the user making the approval request.
+
+
+#### **`HumanFeedback`**
+The `HumanFeedback` model captures user feedback on a specific step or plan. It includes the following attributes:
+
+- **`step_id`**: The ID of the step the feedback is related to.
+- **`plan_id`**: The ID of the plan containing the step.
+- **`session_id`**: The session ID associated with the feedback.
+- **`approved`**: A boolean indicating if the step is approved.
+- **`human_feedback`**: Optional comments or feedback provided by the user.
+- **`updated_action`**: Optional modified action based on the feedback.
+- **`user_id`**: The ID of the user providing the feedback.
+
+#### **`HumanClarification`**
+The `HumanClarification` model represents clarifications provided by the user about a plan. It includes the following attributes:
+
+- **`plan_id`**: The ID of the plan requiring clarification.
+- **`session_id`**: The session ID associated with the plan.
+- **`human_clarification`**: The clarification details provided by the user.
+- **`user_id`**: The ID of the user providing the clarification.
+
+#### **`ActionRequest`**
+The `ActionRequest` model captures a request to perform an action within the system. It includes the following attributes:
+
+- **`session_id`**: The session ID associated with the action request.
+- **`plan_id`**: The ID of the plan associated with the action.
+- **`step_id`**: Optional ID of the step associated with the action.
+- **`action`**: A string describing the action to be performed.
+- **`user_id`**: The ID of the user requesting the action.
+
+#### **`ActionResponse`**
+The `ActionResponse` model represents the response to an action request. It includes the following attributes:
+
+- **`status`**: A string indicating the status of the action (e.g., `success`, `failure`).
+- **`message`**: An optional string providing additional details or context about the action's result.
+- **`data`**: Optional data payload containing any relevant information from the action.
+- **`user_id`**: The ID of the user associated with the action response.
+
+#### **`PlanStateUpdate`**
+The `PlanStateUpdate` model represents an update to the state of a plan. It includes the following attributes:
+
+- **`plan_id`**: The ID of the plan being updated.
+- **`session_id`**: The session ID associated with the plan.
+- **`new_state`**: A string representing the new state of the plan (e.g., `in_progress`, `completed`, `failed`).
+- **`user_id`**: The ID of the user making the state update.
+- **`timestamp`**: An optional timestamp indicating when the update was made.
+
+---
+
+#### **`GroupChatMessage`**
+The `GroupChatMessage` model represents a message sent in a group chat context. It includes the following attributes:
+
+- **`message_id`**: A unique ID for the message.
+- **`session_id`**: The session ID associated with the group chat.
+- **`user_id`**: The ID of the user sending the message.
+- **`content`**: The text content of the message.
+- **`timestamp`**: A timestamp indicating when the message was sent.
+
+---
+
+#### **`RequestToSpeak`**
+The `RequestToSpeak` model represents a user's request to speak or take action in a group chat or collaboration session. It includes the following attributes:
+
+- **`request_id`**: A unique ID for the request.
+- **`session_id`**: The session ID associated with the request.
+- **`user_id`**: The ID of the user making the request.
+- **`reason`**: A string describing the reason or purpose of the request.
+- **`timestamp`**: A timestamp indicating when the request was made.
+
+
+### Data Types
+
+#### **`DataType`**
+The `DataType` enumeration defines the types of data used in the system. Possible values include:
+- **`plan`**: Represents a plan data type.
+- **`session`**: Represents a session data type.
+- **`step`**: Represents a step data type.
+- **`agent_message`**: Represents an agent message data type.
+
+---
+
+#### **`BAgentType`**
+The `BAgentType` enumeration defines the types of agents in the system. Possible values include:
+- **`human`**: Represents a human agent.
+- **`ai_assistant`**: Represents an AI assistant agent.
+- **`external_service`**: Represents an external service agent.
+
+#### **`StepStatus`**
+The `StepStatus` enumeration defines the possible statuses for a step. Possible values include:
+- **`planned`**: Indicates the step is planned but not yet approved or completed.
+- **`approved`**: Indicates the step has been approved.
+- **`completed`**: Indicates the step has been completed.
+- **`failed`**: Indicates the step has failed.
+
+
+#### **`PlanStatus`**
+The `PlanStatus` enumeration defines the possible statuses for a plan. Possible values include:
+- **`in_progress`**: Indicates the plan is currently in progress.
+- **`completed`**: Indicates the plan has been successfully completed.
+- **`failed`**: Indicates the plan has failed.
+
+
+#### **`HumanFeedbackStatus`**
+The `HumanFeedbackStatus` enumeration defines the possible statuses for human feedback. Possible values include:
+- **`pending`**: Indicates the feedback is awaiting review or action.
+- **`addressed`**: Indicates the feedback has been addressed.
+- **`rejected`**: Indicates the feedback has been rejected.
+
+
+### Application Flow
+
+#### **Initialization**
+
+The initialization process sets up the necessary agents and context for a session. This involves:
+
+- **Generating Unique AgentIds**: Each agent is assigned a unique `AgentId` based on the `session_id`, ensuring that multiple sessions can operate independently.
+- **Instantiating Agents**: Various agents, such as `PlannerAgent`, `HrAgent`, and `GroupChatManager`, are initialized and registered with unique `AgentIds`.
+- **Setting Up Azure OpenAI Client**: The Azure OpenAI Chat Completion Client is initialized to handle LLM interactions with support for function calling, JSON output, and vision handling.
+- **Creating Cosmos DB Context**: A `CosmosBufferedChatCompletionContext` is established for stateful interaction storage.
+
+**Code Reference: `utils.py`**
+
+**Steps:**
+1. **Session ID Generation**: If `session_id` is not provided, a new UUID is generated.
+2. **Agent Registration**: Each agent is assigned a unique `AgentId` and registered with the runtime.
+3. **Azure OpenAI Initialization**: The LLM client is configured for advanced interactions.
+4. **Cosmos DB Context Creation**: A buffered context is created for storing stateful interactions.
+5. **Runtime Start**: The runtime is started, enabling communication and agent operation.
+
+
+
+### Input Task Handling
+
+When the `/input_task` endpoint receives an `InputTask`, it performs the following steps:
+
+1. Ensures a `session_id` is available.
+2. Calls `initialize` to set up agents and context for the session.
+3. Creates a `GroupChatManager` agent ID using the `session_id`.
+4. Sends the `InputTask` message to the `GroupChatManager`.
+5. Returns the `session_id` and `plan_id`.
+
+**Code Reference: `app.py`**
+
+ @app.post("/input_task")
+ async def input_task(input_task: InputTask):
+ # Initialize session and agents
+ # Send InputTask to GroupChatManager
+ # Return status, session_id, and plan_id
+
+### Planning
+
+The `GroupChatManager` handles the `InputTask` by:
+
+1. Passing the `InputTask` to the `PlannerAgent`.
+2. The `PlannerAgent` generates a `Plan` with detailed `Steps`.
+3. The `PlannerAgent` uses LLM capabilities to create a structured plan based on the task description.
+4. The plan and steps are stored in the Cosmos DB context.
+5. The `GroupChatManager` starts processing the first step.
+
+**Code Reference: `group_chat_manager.py` and `planner.py`**
+
+ # GroupChatManager.handle_input_task
+ plan: Plan = await self.send_message(message, self.planner_agent_id)
+ await self.memory.add_plan(plan)
+ # Start processing steps
+ await self.process_next_step(message.session_id)
+
+ # PlannerAgent.handle_input_task
+ plan, steps = await self.create_structured_message(...)
+ await self.memory.add_plan(plan)
+ for step in steps:
+ await self.memory.add_step(step)
+
+### Step Execution and Approval
+
+For each step in the plan:
+
+1. The `GroupChatManager` retrieves the next planned step.
+2. It sends an `ApprovalRequest` to the `HumanAgent` to get human approval.
+3. The `HumanAgent` waits for human feedback (provided via the `/human_feedback` endpoint).
+4. The step status is updated to `awaiting_feedback`.
+
+**Code Reference: `group_chat_manager.py`**
+
+ async def process_next_step(self, session_id: str):
+ # Get plan and steps
+ # Find next planned step
+ # Update step status to 'awaiting_feedback'
+ # Send ApprovalRequest to HumanAgent
+
+### Human Feedback
+
+The human can provide feedback on a step via the `/human_feedback` endpoint:
+
+1. The `HumanFeedback` message is received by the FastAPI app.
+2. The message is sent to the `HumanAgent`.
+3. The `HumanAgent` updates the step with the feedback.
+4. The `HumanAgent` sends the feedback to the `GroupChatManager`.
+5. The `GroupChatManager` either proceeds to execute the step or handles rejections.
+
+**Code Reference: `app.py` and `human.py`**
+
+ # app.py
+ @app.post("/human_feedback")
+ async def human_feedback(human_feedback: HumanFeedback):
+ # Send HumanFeedback to HumanAgent
+
+ # human.py
+ @message_handler
+ async def handle_human_feedback(self, message: HumanFeedback, ctx: MessageContext):
+ # Update step with feedback
+ # Send feedback back to GroupChatManager
+
+### Action Execution by Specialized Agents
+
+If a step is approved:
+
+1. The `GroupChatManager` sends an `ActionRequest` to the appropriate specialized agent (e.g., `HrAgent`, `ProcurementAgent`).
+2. The specialized agent executes the action using tools and LLMs.
+3. The agent sends an `ActionResponse` back to the `GroupChatManager`.
+4. The `GroupChatManager` updates the step status and proceeds to the next step.
+
+**Code Reference: `group_chat_manager.py` and `base_agent.py`**
+
+ # GroupChatManager.execute_step
+ action_request = ActionRequest(...)
+ await self.send_message(action_request, agent_id)
+
+ # BaseAgent.handle_action_request
+ # Execute action using tools and LLM
+ # Update step status
+ # Send ActionResponse back to GroupChatManager
+
+## Agents Overview
+
+### GroupChatManager
+
+**Role:** Orchestrates the entire workflow.
+**Responsibilities:**
+
+- Receives `InputTask` from the user.
+- Interacts with `PlannerAgent` to generate a plan.
+- Manages the execution and approval process of each step.
+- Handles human feedback and directs approved steps to the appropriate agents.
+
+**Code Reference: `group_chat_manager.py`**
+
+### PlannerAgent
+
+**Role:** Generates a detailed plan based on the input task.
+**Responsibilities:**
+
+- Parses the task description.
+- Creates a structured plan with specific actions and agents assigned to each step.
+- Stores the plan in the context.
+- Handles re-planning if steps fail.
+
+**Code Reference: `planner.py`**
+
+### HumanAgent
+
+**Role:** Interfaces with the human user for approvals and feedback.
+**Responsibilities:**
+
+- Receives `ApprovalRequest` messages.
+- Waits for human feedback (provided via the API).
+- Updates steps in the context based on feedback.
+- Communicates feedback back to the `GroupChatManager`.
+
+**Code Reference: `human.py`**
+
+### Specialized Agents
+
+**Types:** `HrAgent`, `LegalAgent`, `MarketingAgent`, etc.
+**Role:** Execute specific actions related to their domain.
+**Responsibilities:**
+
+- Receive `ActionRequest` messages.
+- Perform actions using tools and LLM capabilities.
+- Provide results and update steps in the context.
+- Communicate `ActionResponse` back to the `GroupChatManager`.
+
+**Common Implementation:**
+All specialized agents inherit from `BaseAgent`, which handles common functionality.
+**Code Reference:** `base_agent.py`, `hr.py`, etc.
+
+
+
+## Persistent Storage with Cosmos DB
+
+The application uses Azure Cosmos DB to store and retrieve session data, plans, steps, and messages. This ensures that the state is maintained across different components and can handle multiple sessions concurrently.
+
+**Key Points:**
+
+- **Session Management:** Stores session information and current status.
+- **Plan Storage:** Plans are saved and can be retrieved or updated.
+- **Step Tracking:** Each step's status, actions, and feedback are stored.
+- **Message History:** Chat messages between agents are stored for context.
+
+**Cosmos DB Client Initialization:**
+
+- Uses `ClientSecretCredential` for authentication.
+- Asynchronous operations are used throughout to prevent blocking.
+
+**Code Reference: `cosmos_memory.py`**
+
+## Utilities
+
+### `initialize` Function
+
+**Location:** `utils.py`
+**Purpose:** Initializes agents and context for a session, ensuring that each session has its own unique agents and runtime.
+**Key Actions:**
+
+- Generates unique AgentIds with the `session_id`.
+- Creates instances of agents and registers them with the runtime.
+- Initializes `CosmosBufferedChatCompletionContext` for session-specific storage.
+- Starts the runtime.
+
+**Example Usage:**
+
+ runtime, cosmos_memory = await initialize(input_task.session_id)
+
+## Summary
+
+This application orchestrates a group of AI agents to accomplish user-defined tasks by:
+
+- Accepting tasks via HTTP endpoints.
+- Generating detailed plans using LLMs.
+- Delegating actions to specialized agents.
+- Incorporating human feedback.
+- Maintaining state using Azure Cosmos DB.
+
+Understanding the flow of data through the endpoints, agents, and persistent storage is key to grasping the logic of the application. Each component plays a specific role in ensuring tasks are planned, executed, and adjusted based on feedback, providing a robust and interactive system.
+
+For instructions to setup a local development environment for the solution, please see [deployment guide](./DeploymentGuide.md).
diff --git a/docs/CustomizingAzdParameters.md b/docs/CustomizingAzdParameters.md
new file mode 100644
index 000000000..1efd8accd
--- /dev/null
+++ b/docs/CustomizingAzdParameters.md
@@ -0,0 +1,41 @@
+## [Optional]: Customizing resource names
+
+By default this template will use the environment name as the prefix to prevent naming collisions within Azure. The parameters below show the default values. You only need to run the statements below if you need to change the values.
+
+> To override any of the parameters, run `azd env set
+
+
+
+ Bake Cookies +
+ + Bake Cookies +
Please bake 12 chocolate chip cookies for tomorrow's event.
+
+
+
+Deploy in GitHub Codespaces
+ +### GitHub Codespaces + +You can run this solution using GitHub Codespaces. The button will open a web-based VS Code instance in your browser: + +1. Open the solution accelerator (this may take several minutes): + + [](https://codespaces.new/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator) + +2. Accept the default values on the create Codespaces page. +3. Open a terminal window if it is not already open. +4. Continue with the [deploying steps](#deploying-with-azd). + +
+
+
+Deploy in VS Code
+ +### VS Code Dev Containers + +You can run this solution in VS Code Dev Containers, which will open the project in your local VS Code using the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers): + +1. Start Docker Desktop (install it if not already installed). +2. Open the project: + + [](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator) + +3. In the VS Code window that opens, once the project files show up (this may take several minutes), open a terminal window. +4. Continue with the [deploying steps](#deploying-with-azd). + +
+
+
+Deploy in your local Environment
+ +### Local Environment + +If you're not using one of the above options for opening the project, then you'll need to: + +1. Make sure the following tools are installed: + + - [PowerShell](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.5) (v7.0+) - available for Windows, macOS, and Linux. + - [Azure Developer CLI (azd)](https://aka.ms/install-azd) (v1.15.0+) - version + - [Python 3.9+](https://www.python.org/downloads/) + - [Docker Desktop](https://www.docker.com/products/docker-desktop/) + - [Git](https://git-scm.com/downloads) + +2. Clone the repository or download the project code via command-line: + + ```shell + azd init -t microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator/ + ``` + +3. Open the project folder in your terminal or editor. +4. Continue with the [deploying steps](#deploying-with-azd). + ++ +Consider the following settings during your deployment to modify specific settings: + +
+
+
+Configurable Deployment Settings
+ +When you start the deployment, most parameters will have **default values**, but you can update the following settings [here](../docs/CustomizingAzdParameters.md): + +| **Setting** | **Description** | **Default value** | +| ------------------------------ | ------------------------------------------------------------------------------------ | ----------------- | +| **Environment Name** | Used as a prefix for all resource names to ensure uniqueness across environments. | macae | +| **Azure Region** | Location of the Azure resources. Controls where the infrastructure will be deployed. | swedencentral | +| **OpenAI Deployment Location** | Specifies the region for OpenAI resource deployment. | swedencentral | +| **Model Deployment Type** | Defines the deployment type for the AI model (e.g., Standard, GlobalStandard). | GlobalStandard | +| **GPT Model Name** | Specifies the name of the GPT model to be deployed. | gpt-4o | +| **GPT Model Version** | Version of the GPT model to be used for deployment. | 2024-08-06 | +| **GPT Model Capacity** | Sets the GPT model capacity. | 150 | +| **Image Tag** | Docker image tag used for container deployments. | latest | +| **Enable Telemetry** | Enables telemetry for monitoring and diagnostics. | true | + + +
+
+
+[Optional] Quota Recommendations
+ +By default, the **GPT model capacity** in deployment is set to **140k tokens**. + +To adjust quota settings, follow these [steps](./AzureGPTQuotaSettings.md). + +**β οΈ Warning:** Insufficient quota can cause deployment errors. Please ensure you have the recommended capacity or request additional capacity before deploying this solution. + +
+
+
+
+### Deploying with AZD
+
+Once you've opened the project in [Codespaces](#github-codespaces), [Dev Containers](#vs-code-dev-containers), or [locally](#local-environment), you can deploy it to Azure by following these steps:
+
+1. Login to Azure:
+
+ ```shell
+ azd auth login
+ ```
+
+ #### To authenticate with Azure Developer CLI (`azd`), use the following command with your **Tenant ID**:
+
+ ```sh
+ azd auth login --tenant-id Reusing an Existing Log Analytics Workspace
+ + Guide to get your [Existing Workspace ID](/docs/re-use-log-analytics.md) + +
+ {title}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+ {(primaryButtonText || secondaryButtonText) && (
+
+ );
+};
+
+export default ContentNotFound;
diff --git a/src/frontend/src/components/content/HomeInput.tsx b/src/frontend/src/components/content/HomeInput.tsx
new file mode 100644
index 000000000..15ca5566c
--- /dev/null
+++ b/src/frontend/src/components/content/HomeInput.tsx
@@ -0,0 +1,151 @@
+import {
+ Body1Strong,
+ Button,
+ Caption1,
+ Title2,
+} from "@fluentui/react-components";
+import React, { useRef, useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+import "./../../styles/Chat.css";
+import "../../styles/prism-material-oceanic.css";
+import "./../../styles/HomeInput.css";
+
+import { HomeInputProps, quickTasks, QuickTask } from "../../models/homeInput";
+import { TaskService } from "../../services/TaskService";
+import { NewTaskService } from "../../services/NewTaskService";
+
+import ChatInput from "@/coral/modules/ChatInput";
+import InlineToaster, { useInlineToaster } from "../toast/InlineToaster";
+import PromptCard from "@/coral/components/PromptCard";
+import { Send } from "@/coral/imports/bundleicons";
+
+const HomeInput: React.FC
+ {primaryButtonText && (
+
+ )}
+ {secondaryButtonText && (
+
+ )}
+
+ )}
+
+
+ );
+};
+
+export default HomeInput;
diff --git a/src/frontend/src/components/content/PlanChat.tsx b/src/frontend/src/components/content/PlanChat.tsx
new file mode 100644
index 000000000..ef9f4fa8a
--- /dev/null
+++ b/src/frontend/src/components/content/PlanChat.tsx
@@ -0,0 +1,193 @@
+import HeaderTools from "@/coral/components/Header/HeaderTools";
+import { Copy, Send } from "@/coral/imports/bundleicons";
+import ChatInput from "@/coral/modules/ChatInput";
+import remarkGfm from "remark-gfm";
+import rehypePrism from "rehype-prism";
+import { AgentType, PlanChatProps, role } from "@/models";
+import {
+ Body1,
+ Button,
+ Spinner,
+ Tag,
+ ToolbarDivider,
+} from "@fluentui/react-components";
+import { DiamondRegular, HeartRegular } from "@fluentui/react-icons";
+import { useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import "../../styles/PlanChat.css";
+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
+
+
+
+ }
+ />
+
+
+
+
+ How can I help?
+
+
+
+
+
+ Quick tasks
+
+
+
+ {quickTasks.map((task) => (
+ handleQuickTaskClick(task)}
+ disabled={submitting}
+ />
+ ))}
+
+
+
+ Back to bottom
+
+ )}
+
+ );
+};
+
+export default PlanChat;
diff --git a/src/frontend/src/components/content/PlanPanelLeft.tsx b/src/frontend/src/components/content/PlanPanelLeft.tsx
new file mode 100644
index 000000000..8f14d823c
--- /dev/null
+++ b/src/frontend/src/components/content/PlanPanelLeft.tsx
@@ -0,0 +1,166 @@
+import PanelLeft from "@/coral/components/Panels/PanelLeft";
+import PanelLeftToolbar from "@/coral/components/Panels/PanelLeftToolbar";
+import {
+ Body1Strong,
+ Button,
+ Subtitle1,
+ Subtitle2,
+ Toast,
+ ToastBody,
+ ToastTitle,
+ Tooltip,
+ useToastController,
+} from "@fluentui/react-components";
+import {
+ Add20Regular,
+ ChatAdd20Regular,
+ ErrorCircle20Regular,
+} from "@fluentui/react-icons";
+import TaskList from "./TaskList";
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { PlanPanelLefProps, PlanWithSteps, Task, UserInfo } from "@/models";
+import { apiService } from "@/api";
+import { TaskService } from "@/services";
+import MsftColor from "@/coral/imports/MsftColor";
+import ContosoLogo from "../../coral/imports/ContosoLogo";
+import "../../styles/PlanPanelLeft.css";
+import PanelFooter from "@/coral/components/Panels/PanelFooter";
+import PanelUserCard from "../../coral/components/Panels/UserCard";
+import { getUserInfoGlobal } from "@/api/config";
+
+const PlanPanelLeft: React.FC
+
+
+ {showScrollButton && (
+
+ {messages.map((msg, index) => {
+ const isHuman = msg.source === AgentType.HUMAN;
+
+ return (
+
+
+ {!isHuman && (
+
+
+
+ );
+ })}
+
+
+ )}
+
+
+
+ {TaskService.cleanTextToSpaces(msg.source)}
+
+
+ BOT
+
+
+
+
+ {TaskService.cleanHRAgent(msg.content) || ""}
+
+
+ {!isHuman && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ OnChatSubmit(input)}
+ disabledChat={
+ planData?.enableChat ? submittingChatDisableInput : true
+ }
+ placeholder="Add more info to this task..."
+ >
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PlanPanelLeft;
diff --git a/src/frontend/src/components/content/PlanPanelRight.tsx b/src/frontend/src/components/content/PlanPanelRight.tsx
new file mode 100644
index 000000000..671337f97
--- /dev/null
+++ b/src/frontend/src/components/content/PlanPanelRight.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import PanelRight from "@/coral/components/Panels/PanelRight";
+import TaskDetails from "./TaskDetails";
+import { TaskDetailsProps } from "@/models";
+
+const PlanPanelRight: React.FC+
navigate("/", { state: { focusInput: true } })}
+ tabIndex={0} // β
allows tab focus
+ role="button" // β
announces as button
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ navigate("/", { state: { focusInput: true } });
+ }
+ }}
+ >
+ New task
+
+
+
+
+ +
+
+
+
+ );
+};
+
+export default TaskDetails;
diff --git a/src/frontend/src/components/content/TaskList.tsx b/src/frontend/src/components/content/TaskList.tsx
new file mode 100644
index 000000000..47d2f0d39
--- /dev/null
+++ b/src/frontend/src/components/content/TaskList.tsx
@@ -0,0 +1,110 @@
+import {
+ Button,
+ Menu,
+ MenuTrigger,
+ Caption1,
+ Skeleton,
+ SkeletonItem,
+} from "@fluentui/react-components";
+import { MoreHorizontal20Regular } from "@fluentui/react-icons";
+import React from "react";
+import "../../styles/TaskList.css";
+import { Task, TaskListProps } from "@/models";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionItem,
+ AccordionPanel,
+} from "@fluentui/react-components";
+
+const TaskList: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {planData.plan.initial_goal}
+
+
+
+
+ {completedCount} of {total} completed
+
+
+ +
+ {steps.map((step) => {
+ const { description, functionOrDetails } =
+ TaskService.splitSubtaskAction(step.action);
+ const canInteract = planData.enableStepButtons;
+
+ return (
+
+
+
+ );
+ })}
+
+ {renderStatusIcon(step.human_approval_status || step.status)}
+
+
+
+ {description}{" "}
+ {functionOrDetails && (
+ {functionOrDetails}
+ )}
+
+
+
+ {step.human_approval_status !== "accepted" &&
+ step.human_approval_status !== "rejected" && (
+ <>
+
+ }
+ appearance="subtle"
+ onClick={
+ canInteract
+ ? async (e) => {
+ // Disable buttons for this step
+ setSteps((prev) =>
+ prev.map((s) =>
+ s.id === step.id
+ ? { ...s, _isActionLoading: true }
+ : s
+ )
+ );
+ try {
+ await preOnApproved(step);
+ } finally {
+ // Remove loading state after API call
+ setSteps((prev) =>
+ prev.map((s) =>
+ s.id === step.id
+ ? { ...s, _isActionLoading: false }
+ : s
+ )
+ );
+ }
+ }
+ : undefined
+ }
+ disabled={
+ !canInteract ||
+ !!step._isActionLoading
+ }
+ className={
+ canInteract
+ ? "task-details-action-button"
+ : "task-details-action-button-disabled"
+ }
+ />
+
+
+
+ }
+ appearance="subtle"
+ onClick={
+ canInteract
+ ? async (e) => {
+ setSteps((prev) =>
+ prev.map((s) =>
+ s.id === step.id
+ ? { ...s, _isActionLoading: true }
+ : s
+ )
+ );
+ try {
+ await preOnRejected(step);
+ } finally {
+ setSteps((prev) =>
+ prev.map((s) =>
+ s.id === step.id
+ ? { ...s, _isActionLoading: false }
+ : s
+ )
+ );
+ }
+ }
+ : undefined
+ }
+ disabled={
+ !canInteract ||
+ !!step._isActionLoading
+ }
+ className={
+ canInteract
+ ? "task-details-action-button"
+ : "task-details-action-button-disabled"
+ }
+ />
+
+
+ )}
+
+
+
+
+ Agents
+
+
+ {agents.map((agent) => (
+
+
+
+ ))}
+
+
+ {TaskService.cleanTextToSpaces(agent)}
+
+
+ onTaskSelect(task.id)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ onTaskSelect(task.id);
+ }
+ }}
+ >
+
+
+ );
+ };
+
+ const renderSkeleton = (key: string) => (
+
+ {task.date}
+ )}
+ {task.status == "inprogress" && (
+ {`${task?.completed_steps} of ${task?.total_steps} completed`}
+ )}
+
+
+
+ {task.name}
+
+ {task.date && task.status == "completed" && (
+
+
+
+
+ );
+
+ return (
+
+
+
+
+
+
+ In progress
+
+
+ {loading
+ ? Array.from({ length: 5 }, (_, i) =>
+ renderSkeleton(`in-progress-${i}`)
+ )
+ : inProgressTasks.map(renderTaskItem)}
+
+
+
+ Completed
+
+ {loading
+ ? Array.from({ length: 5 }, (_, i) =>
+ renderSkeleton(`completed-${i}`)
+ )
+ : completedTasks.map(renderTaskItem)}
+
+
+
+
+ );
+};
+
+export default TaskList;
diff --git a/src/frontend/src/components/content/contoso.tsx b/src/frontend/src/components/content/contoso.tsx
new file mode 100644
index 000000000..0a72809c5
--- /dev/null
+++ b/src/frontend/src/components/content/contoso.tsx
@@ -0,0 +1,18 @@
+const ContosoLogo: React.FC = () => {
+ return (
+
+ );
+}
+
+export default ContosoLogo;
\ No newline at end of file
diff --git a/src/frontend/src/components/toast/InlineToaster.tsx b/src/frontend/src/components/toast/InlineToaster.tsx
new file mode 100644
index 000000000..769611870
--- /dev/null
+++ b/src/frontend/src/components/toast/InlineToaster.tsx
@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from "react";
+import {
+ CheckmarkCircle20Regular,
+ Info20Regular,
+ Warning20Regular,
+ DismissCircle20Regular,
+ Dismiss20Regular,
+} from "@fluentui/react-icons";
+import { Body1, Button, Spinner } from "@fluentui/react-components";
+
+// Toast type
+export type ToastIntent = "info" | "success" | "warning" | "error" | "progress";
+
+type Toast = {
+ id: number;
+ content: React.ReactNode;
+ intent: ToastIntent;
+ visible: boolean;
+ dismissible?: boolean;
+};
+
+let _setToasts: React.Dispatch
+ {toasts.map((toast) => (
+
+ );
+};
+
+export default InlineToaster;
diff --git a/src/frontend/src/coral/SYSTEM_OVERVIEW.md b/src/frontend/src/coral/SYSTEM_OVERVIEW.md
new file mode 100644
index 000000000..271383427
--- /dev/null
+++ b/src/frontend/src/coral/SYSTEM_OVERVIEW.md
@@ -0,0 +1,38 @@
+# coral.config
+
+**Coral Config** defines the applicationβs structural baseline β component scaffolding, prebuilt modules, import bundling, and system-wide utilities.
+
+> This folder is not intended for feature development.
+
+---
+
+## What Lives Here
+
+- `components/` β Stateless layout primitives like `Header`, `PanelLeft`, `PanelRight`, `Content`, etc. These are styled and functional, but intentionally generic.
+- `modules/` β Composite UI blocks that encapsulate common layouts and logic (e.g., a full-width `ChatPanel`, or a `PanelLeft` with navigation baked in). These are production-ready and reusable
+- `imports/` β Centralized icon and asset imports to streamline DX and reduce boilerplate.
+- `eventbus.ts` β Shared event system for cross-component communication.
+- `PanelRegistry.ts` β Central config for registering and referencing dynamic panel zones.
+
+---
+
+## When Should You Modify This?
+
+Only when you're:
+- Creating or updating shared UI primitives
+- Building new reusable modules
+- Extending foundational architecture
+
+Avoid editing directly unless your change impacts system-level behavior. When in doubt, route it through the Coral steward or log it in the dev sync.
+
+---
+
+## Design Philosophy
+
+Coral isolates **infrastructure from implementation** β keeping base components clean and predictable, while enabling rapid development through composable modules.
+
+This layer isnβt for experiments. Itβs for the architecture that lets experiments happen without breaking production.
+
+---
+
+π
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Content/Chat.css b/src/frontend/src/coral/components/Content/Chat.css
new file mode 100644
index 000000000..66da2d143
--- /dev/null
+++ b/src/frontend/src/coral/components/Content/Chat.css
@@ -0,0 +1,249 @@
+Chat container and layout
+.chat-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background-color: var(--colorNeutralBackground1);
+}
+
+/* Messages area */
+.messages-container {
+ flex: 1;
+ overflow-y: auto;
+ padding: 24px;
+}
+
+/* Input area */
+.input-wrapper {
+ position: sticky;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--colorNeutralBackground1);
+ border-top: 1px solid var(--colorNeutralStroke1);
+ padding: 16px 24px;
+}
+
+.input-container {
+ display: flex;
+ gap: 8px;
+ align-items: flex-start;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+/* Message styling */
+.message {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 24px;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.message-content {
+ line-height: 1.5;
+ white-space: pre-wrap;
+ padding: 12px 16px;
+ border-radius: 8px;
+ margin-top: 4px;
+}
+
+.message-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 4px;
+}
+
+.message-role {
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.bot-tag {
+ font-size: 11px;
+ color: var(--colorNeutralForeground2);
+ background-color: var(--colorNeutralBackground2);
+ padding: 2px 6px;
+ border-radius: 4px;
+ text-transform: uppercase;
+}
+
+/* User message */
+.message.user .message-content {
+ background-color: var(--colorBrandBackground);
+ color: var(--colorNeutralForegroundInverted);
+ align-self: flex-end;
+}
+
+/* Assistant/bot message */
+.message.assistant .message-content {
+ background-color: var(--colorNeutralBackground2);
+ color: var(--colorNeutralForeground1);
+ align-self: flex-start;
+}
+
+/* Message actions */
+.message-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+}
+
+.action-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--colorNeutralForeground3);
+ padding: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+}
+
+.action-button:hover {
+ background-color: var(--colorNeutralBackground2);
+}
+
+.message-content p {
+ margin: 0 0 16px 0;
+}
+
+.message-content p:last-child {
+ margin-bottom: 0;
+}
+
+/* System message / action */
+.message.system {
+ display: flex;
+ justify-content: center;
+ margin: 16px 0;
+}
+
+.system-message {
+ background-color: var(--colorNeutralBackground2);
+ padding: 8px 16px;
+ border-radius: 16px;
+ font-size: 14px;
+ color: var(--colorNeutralForeground2);
+ display: inline-block;
+}
+
+/* Code block styling */
+.message-content pre {
+ background-color: rgba(0, 0, 0, 0.05);
+ padding: 16px;
+ border-radius: 4px;
+ overflow-x: auto;
+ margin: 16px 0;
+}
+
+.message.assistant .message-content pre {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.message.user .message-content pre {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.message-content code {
+ font-family: var(--fontFamilyMonospace);
+ font-size: 14px;
+}
+
+/* Typing indicator */
+.typing-indicator {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--colorNeutralForeground2);
+ font-size: 14px;
+}
+
+/* Scroll to bottom button */
+.scroll-button {
+ position: fixed;
+ bottom: 100px;
+ right: 24px;
+ z-index: 1;
+}
+
+/* Input field */
+.input-field {
+ flex: 1;
+ padding: 12px 16px;
+ border: 1px solid var(--colorNeutralStroke1);
+ border-radius: 8px;
+ resize: none;
+ font-family: var(--fontFamilyBase);
+ font-size: var(--fontSizeBase300);
+ line-height: 1.5;
+ background-color: var(--colorNeutralBackground1);
+ color: var(--colorNeutralForeground1);
+ min-height: 44px;
+ overflow-y: auto;
+ max-height: 200px;
+}
+
+.input-field:focus {
+ outline: none;
+ border-color: var(--colorBrandStroke1);
+}
+
+.input-field::placeholder {
+ color: var(--colorNeutralForeground3);
+}
+
+/* Send button */
+.send-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 8px;
+ background-color: var(--colorBrandBackground);
+ color: var(--colorNeutralForegroundInverted);
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.send-button svg {
+ width: 20px;
+ height: 20px;
+ fill: currentColor;
+}
+
+.send-button:disabled {
+ background-color: var(--colorNeutralBackground3);
+ color: var(--colorNeutralForeground3);
+ cursor: not-allowed;
+}
+
+/* Input footer */
+.input-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 8px;
+ padding: 0 16px;
+ font-size: 12px;
+ color: var(--colorNeutralForeground3);
+}
+
+/* Markdown content */
+.markdown-content {
+ width: 100%;
+}
+
+.markdown-content > *:first-child {
+ margin-top: 0;
+}
+
+.markdown-content > *:last-child {
+ margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Content/Content.tsx b/src/frontend/src/coral/components/Content/Content.tsx
new file mode 100644
index 000000000..2eb5d3d5d
--- /dev/null
+++ b/src/frontend/src/coral/components/Content/Content.tsx
@@ -0,0 +1,52 @@
+import React, { useState, ReactNode, ReactElement } from "react";
+import PanelToolbar from "../Panels/PanelLeftToolbar.js"; // Import to identify toolbar
+
+interface ContentProps {
+ children?: ReactNode;
+}
+
+const Content: React.FC
+ {getIconForIntent(toast.intent)}
+
+
+ {toast.content}
+
+
+ {(toast.dismissible || toast.intent === "progress") && (
+
+ )}
+
+ ))}
+
+ {toolbar &&
+ );
+};
+
+export default Content;
diff --git a/src/frontend/src/coral/components/Content/ContentToolbar.tsx b/src/frontend/src/coral/components/Content/ContentToolbar.tsx
new file mode 100644
index 000000000..ec5d75f43
--- /dev/null
+++ b/src/frontend/src/coral/components/Content/ContentToolbar.tsx
@@ -0,0 +1,76 @@
+import React, { ReactNode } from "react";
+import { Body1Strong } from "@fluentui/react-components";
+
+interface ContentToolbarProps {
+ panelIcon?: ReactNode;
+ panelTitle?: string | null;
+ children?: ReactNode;
+}
+
+const ContentToolbar: React.FC{toolbar}
}
+
+
+ {content}
+
+
+ {(panelIcon || panelTitle) && (
+
+ );
+};
+
+export default ContentToolbar;
diff --git a/src/frontend/src/coral/components/Content/README.md b/src/frontend/src/coral/components/Content/README.md
new file mode 100644
index 000000000..443aa15f8
--- /dev/null
+++ b/src/frontend/src/coral/components/Content/README.md
@@ -0,0 +1,330 @@
+# Content Components
+
+The Content components create the main workspace of your Coral application, providing the primary display area for your application's features and interfaces.
+
+## Components Overview
+
+- `Content`: Main container for application content
+- `ContentToolbar`: Header area for the content section with title and controls
+- `Chat`: Component for displaying and interacting with chat interfaces
+
+## Phase 1: UI Customization
+
+### Content Component
+
+The `Content` component creates the main workspace area:
+
+```jsx
+
+ {panelIcon && (
+
+ {panelTitle}
+
+ )}
+
+ )}
+
+ {panelIcon}
+
+ )}
+ {panelTitle && (
+
+ {children}
+
+
+ {items.map(item => (
+
+ {item.title}} />
+
+ 
+
+ {item.description}
+
+
+
+
+ ))}
+
+
+
+ ) : (
+ {selectedItem.name}
+ID: {selectedItem.id}
+Category: {selectedItem.category}
+ {/* More item details */} +
+
+ )}
+ Select an item from the left panel to view details
+{children}
; // Just a semantic wrapper
+};
+
+export default CoralAccordion;
diff --git a/src/frontend/src/coral/components/CoralAccordion/CoralAccordionContext.tsx b/src/frontend/src/coral/components/CoralAccordion/CoralAccordionContext.tsx
new file mode 100644
index 000000000..f82dc13e3
--- /dev/null
+++ b/src/frontend/src/coral/components/CoralAccordion/CoralAccordionContext.tsx
@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+export const CoralAccordionContext = createContext<{
+ open: boolean;
+ toggle: () => void;
+} | null>(null);
+
+export const useCoralAccordion = () => {
+ const ctx = useContext(CoralAccordionContext);
+ if (!ctx) throw new Error("Must be used inside CoralAccordionItem");
+ return ctx;
+};
diff --git a/src/frontend/src/coral/components/CoralAccordion/CoralAccordionHeader.tsx b/src/frontend/src/coral/components/CoralAccordion/CoralAccordionHeader.tsx
new file mode 100644
index 000000000..c6372a423
--- /dev/null
+++ b/src/frontend/src/coral/components/CoralAccordion/CoralAccordionHeader.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Body1 } from "@fluentui/react-components";
+import { ChevronDown20Regular, ChevronUp20Regular } from "@fluentui/react-icons";
+import { useCoralAccordion } from "./CoralAccordionContext";
+
+type Props = {
+ children: React.ReactNode;
+ height?: string;
+ chevron?: boolean;
+};
+
+const CoralAccordionHeader: React.FC
+ {children}
+ {chevron && (
+
+
+ );
+};
+
+CoralAccordionHeader.displayName = "CoralAccordionHeader";
+export default CoralAccordionHeader;
diff --git a/src/frontend/src/coral/components/CoralAccordion/CoralAccordionItem.tsx b/src/frontend/src/coral/components/CoralAccordion/CoralAccordionItem.tsx
new file mode 100644
index 000000000..a25e98357
--- /dev/null
+++ b/src/frontend/src/coral/components/CoralAccordion/CoralAccordionItem.tsx
@@ -0,0 +1,36 @@
+import React, { useState, cloneElement, isValidElement } from "react";
+import { CoralAccordionContext } from "./CoralAccordionContext";
+
+type CoralAccordionItemProps = {
+ defaultOpen?: boolean;
+ children: React.ReactNode;
+};
+
+const CoralAccordionItem: React.FC
+ {children}
+
+ );
+};
+CoralAccordionPanel.displayName = "CoralAccordionPanel";
+export default CoralAccordionPanel;
diff --git a/src/frontend/src/coral/components/Header/Header.tsx b/src/frontend/src/coral/components/Header/Header.tsx
new file mode 100644
index 000000000..8af77094f
--- /dev/null
+++ b/src/frontend/src/coral/components/Header/Header.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { Avatar, Subtitle2 } from "@fluentui/react-components";
+import MsftColor from "../../imports/MsftColor"; // Default icon component
+
+/**
+ * @component
+ * @name Header
+ * @description A header component for displaying a logo, title, and optional subtitle.
+ *
+ * @prop {React.ReactNode} [logo] - Custom logo (defaults to Microsoft icon).
+ * @prop {string} [title="Microsoft"] - Main title text.
+ * @prop {string} [subtitle] - Optional subtitle displayed next to the title.
+ * @prop {React.ReactNode} [children] - Optional header toolbar (e.g., buttons, menus).
+ */
+type HeaderProps = {
+ logo?: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+ children?: React.ReactNode;
+};
+
+const Header: React.FC
+ {/* Render custom logo or default MsftColor logo */}
+
+ {title}
+ {subtitle && (
+ | {subtitle}
+ )}
+
+
+
+ {/* HEADER TOOLBAR (rendered only if passed as a child) */}
+ {children}
+
+ {children}
+
+ );
+};
+
+export default CoralShellColumn;
+
+
+
diff --git a/src/frontend/src/coral/components/Layout/CoralShellRow.tsx b/src/frontend/src/coral/components/Layout/CoralShellRow.tsx
new file mode 100644
index 000000000..2ccdf21fc
--- /dev/null
+++ b/src/frontend/src/coral/components/Layout/CoralShellRow.tsx
@@ -0,0 +1,20 @@
+// coral.config/components/Layout/CoralShellRow.tsx
+// Structural wrapper for main workspace layout (horizontal split)
+
+import React from "react";
+
+const CoralShellRow: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default CoralShellRow;
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Layout/README.md b/src/frontend/src/coral/components/Layout/README.md
new file mode 100644
index 000000000..59b3a0f09
--- /dev/null
+++ b/src/frontend/src/coral/components/Layout/README.md
@@ -0,0 +1,157 @@
+# Layout Components
+
+The Layout components provide the fundamental structure for your Coral application, defining how different sections are arranged on the page.
+
+## Components Overview
+
+- `CoralShellColumn`: Vertical layout container that typically wraps the entire application
+- `CoralShellRow`: Horizontal layout container that typically wraps the main content area and panels
+
+## Phase 1: UI Customization
+
+### CoralShellColumn Component
+
+The `CoralShellColumn` component creates a vertical column layout:
+
+```jsx
+
+ {iconSrc && (
+ 
+ )}
+ {loadingMessage}
+
+ );
+};
+
+export default LoadingMessage;
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Panels/PanelFooter.tsx b/src/frontend/src/coral/components/Panels/PanelFooter.tsx
new file mode 100644
index 000000000..d0ae9619f
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/PanelFooter.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const PanelFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+PanelFooter.displayName = "PanelFooter";
+
+export default PanelFooter;
diff --git a/src/frontend/src/coral/components/Panels/PanelLeft.tsx b/src/frontend/src/coral/components/Panels/PanelLeft.tsx
new file mode 100644
index 000000000..bc83cbe78
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/PanelLeft.tsx
@@ -0,0 +1,134 @@
+import React, {
+ useState,
+ useEffect,
+ ReactNode,
+ ReactElement,
+ isValidElement,
+} from "react";
+import PanelToolbar from "./PanelLeftToolbar.js";
+import PanelFooter from "./PanelFooter"; // π new
+import {
+ Avatar,
+ Body1,
+ Body1Strong,
+ Caption1,
+} from "@fluentui/react-components";
+import Human from "../../imports/human.png";
+
+interface PanelLeftProps {
+ panelWidth?: number;
+ panelResize?: boolean;
+ children?: ReactNode;
+}
+
+const PanelLeft: React.FC
+ {toolbar && = ({
+ panelIcon,
+ panelTitle,
+ linkTo,
+ children,
+}) => {
+ const TitleContent = (
+ = ({
+ panelWidth = 325, // Default width if not provided
+ panelResize = true,
+ panelType = "first", // Default to "first" if not explicitly defined
+ defaultClosed = false,
+ children,
+}) => {
+ const [isActive, setIsActive] = useState(() =>
+ defaultClosed ? false : panelType === "first"
+ );
+ const [width, setWidth] = useState(panelWidth); // Initial width from props or default
+ const [isHandleHovered, setIsHandleHovered] = useState(false);
+
+ useEffect(() => {
+ // Initialize shared width if not already set in the EventBus
+ if (eventBus.getPanelWidth() === 400) {
+ eventBus.setPanelWidth(panelWidth); // Use the provided panelWidth prop
+ }
+ setWidth(eventBus.getPanelWidth()); // Set the current width from EventBus
+
+ const handleActivePanel = (panel: "first" | "second" | "third" | "fourth" | null) => {
+ setIsActive(panel === panelType); // Check if this panelType matches the active panel
+ };
+
+ const handleWidthChange = (newWidth: number) => {
+ setWidth(newWidth); // Update width when EventBus notifies
+ };
+
+ eventBus.on("setActivePanel", handleActivePanel);
+ eventBus.on("panelWidthChanged", handleWidthChange);
+
+ return () => {
+ eventBus.off("setActivePanel", handleActivePanel);
+ eventBus.off("panelWidthChanged", handleWidthChange);
+ };
+ }, [panelType, panelWidth]);
+
+ useEffect(() => {
+ // On initial mount, tell the header what panels are open
+ eventBus.emit("panelInitState", {
+ panelType,
+ isActive,
+ });
+ }, []);
+
+ const handleMouseDown = (e: React.MouseEvent) => {
+ if (!panelResize) return;
+
+ const startX = e.clientX;
+ const startWidth = width;
+
+ const onMouseMove = (moveEvent: MouseEvent) => {
+ const newWidth = Math.min(
+ 500, // Max width
+ Math.max(256, startWidth - (moveEvent.clientX - startX)) // Min width
+ );
+ setWidth(newWidth);
+ eventBus.setPanelWidth(newWidth); // Persist the new width in EventBus
+ };
+
+ const onMouseUp = () => {
+ document.removeEventListener("mousemove", onMouseMove);
+ document.removeEventListener("mouseup", onMouseUp);
+ document.body.style.userSelect = "";
+ };
+
+ document.addEventListener("mousemove", onMouseMove);
+ document.addEventListener("mouseup", onMouseUp);
+
+ document.body.style.userSelect = "none";
+ };
+
+ if (!isActive) return null; // Do not render if not active
+
+ const childrenArray = React.Children.toArray(children) as ReactElement[];
+ const toolbar = childrenArray.find(
+ (child) => React.isValidElement(child) && child.type === PanelRightToolbar
+ );
+ const content = childrenArray.filter(
+ (child) => !(React.isValidElement(child) && child.type === PanelRightToolbar)
+ );
+
+ return (
+
{toolbar}
}
+
+
+ {content}
+
+
+ {footer && {footer}
}
+
+ {panelResize && (
+ setIsHandleHovered(true)}
+ onMouseLeave={() => setIsHandleHovered(false)}
+ style={{
+ position: "absolute",
+ top: 0,
+ right: 0,
+ width: "2px",
+ height: "100%",
+ cursor: "ew-resize",
+ zIndex: 1,
+ backgroundColor: isHandleHovered
+ ? "var(--colorNeutralStroke2)"
+ : "transparent",
+ }}
+ />
+ )}
+
+ );
+};
+
+export default PanelLeft;
diff --git a/src/frontend/src/coral/components/Panels/PanelLeftToolbar.tsx b/src/frontend/src/coral/components/Panels/PanelLeftToolbar.tsx
new file mode 100644
index 000000000..3272b332c
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/PanelLeftToolbar.tsx
@@ -0,0 +1,101 @@
+import React, { ReactNode } from "react";
+import { Subtitle2 } from "@fluentui/react-components";
+import { Link } from "react-router-dom";
+
+interface PanelLeftToolbarProps {
+ panelIcon?: ReactNode;
+ panelTitle?: string | null;
+ linkTo?: string;
+ children?: ReactNode;
+}
+
+const PanelLeftToolbar: React.FC
+ {panelIcon && (
+
+ {panelTitle}
+
+ )}
+
+ );
+
+ return (
+
+ {panelIcon}
+
+ )}
+ {panelTitle && (
+
+ {(panelIcon || panelTitle) &&
+ (linkTo ? (
+
+ {TitleContent}
+
+ ) : (
+ TitleContent
+ ))}
+
+ );
+};
+
+export default PanelLeftToolbar;
diff --git a/src/frontend/src/coral/components/Panels/PanelRight.tsx b/src/frontend/src/coral/components/Panels/PanelRight.tsx
new file mode 100644
index 000000000..19f5ee758
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/PanelRight.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useEffect, ReactNode, ReactElement } from "react";
+import eventBus from "../eventbus.js";
+import PanelRightToolbar from "./PanelRightToolbar.js"; // Import to identify toolbar
+
+interface PanelRightProps {
+ panelWidth?: number; // Optional width of the panel
+ panelResize?: boolean; // Whether resizing is enabled
+ panelType: "first" | "second" | "third" | "fourth"; // Panel type identifier
+ defaultClosed?: boolean;
+ children?: ReactNode;
+}
+
+const PanelRight: React.FC
+ {children}
+
+
+ {toolbar && = ({
+ panelTitle,
+ panelIcon,
+ // panelType = "first", // Default value set here
+ children,
+}) => {
+ const handleDismiss = () => {
+ eventBus.emit("setActivePanel", null); // Close the current panel
+ };
+
+ return (
+
+
+```
+
+Customization options:
+
+```jsx
+
+ {/* Content */}
+
+```
+
+### PanelLeftToolbar Component
+
+The `PanelLeftToolbar` component provides a header for the left panel:
+
+```jsx
+
+ {/* Content for the first right panel */}
+
+
+
+ {/* Content for the second right panel */}
+
+```
+
+## Phase 2: Data Population (Mock Data)
+
+The panels can be populated with dynamic data to display lists, trees, or other structured information.
+
+### Navigation List Example
+
+```jsx
+import { useState } from 'react';
+import {
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemText
+} from '@fluentui/react-components';
+
+function NavigationPanel() {
+ // Mock navigation data
+ const navItems = [
+ { id: 'home', label: 'Home', icon:
+
+ );
+}
+```
+
+### Filtered List Example
+
+```jsx
+import { useState, useEffect } from 'react';
+import {
+ Input,
+ List,
+ ListItem,
+ ListItemText
+} from '@fluentui/react-components';
+import { Search } from '@fluentui/react-icons';
+
+function FilterPanel() {
+ // Mock data
+ const allItems = [
+ { id: '1', name: 'Item One', category: 'A' },
+ { id: '2', name: 'Item Two', category: 'B' },
+ { id: '3', name: 'Another Item', category: 'A' },
+ { id: '4', name: 'Last Item', category: 'C' },
+ ];
+
+ const [searchTerm, setSearchTerm] = useState('');
+ const [filteredItems, setFilteredItems] = useState(allItems);
+
+ // Filter items based on search
+ useEffect(() => {
+ const filtered = allItems.filter(item =>
+ item.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+ setFilteredItems(filtered);
+ }, [searchTerm]);
+
+ return (
+
+
+ );
+}
+```
+
+## Phase 3: Service Integration & Event Handling
+
+Connect your panels to services and event handling to make them fully interactive.
+
+### Data Service Integration
+
+```jsx
+import { useState, useEffect } from 'react';
+import {
+ List,
+ ListItem,
+ ListItemText,
+ Spinner
+} from '@fluentui/react-components';
+// Example service
+import { itemService } from '../../services/itemService';
+
+function ServiceConnectedPanel() {
+ const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ // Fetch data from service
+ setLoading(true);
+ itemService.getItems()
+ .then(data => {
+ setItems(data);
+ setLoading(false);
+ })
+ .catch(err => {
+ console.error('Failed to load items:', err);
+ setError('Failed to load items');
+ setLoading(false);
+ });
+ }, []);
+
+ return (
+
+
+ );
+}
+```
+
+### EventBus Integration
+
+```jsx
+import { useState, useEffect } from 'react';
+import eventBus from '../eventbus';
+
+function EventAwarePanel() {
+ const [isPanelVisible, setPanelVisible] = useState(true);
+
+ useEffect(() => {
+ // Subscribe to events
+ const handleToggle = (visible) => {
+ setPanelVisible(visible);
+ };
+
+ eventBus.on('toggleLeftPanel', handleToggle);
+
+ // Cleanup
+ return () => {
+ eventBus.off('toggleLeftPanel', handleToggle);
+ };
+ }, []);
+
+ if (!isPanelVisible) return null;
+
+ return (
+
+
+ );
+}
+```
+
+### Selection Event Emitting
+
+```jsx
+import eventBus from '../eventbus';
+
+function SelectionPanel() {
+ const items = [/*...your items...*/];
+
+ const handleItemClick = (item) => {
+ // Emit event when item is selected
+ eventBus.emit('itemSelected', item);
+ };
+
+ return (
+
+
+ );
+}
+```
+
+## Props API
+
+### PanelLeft Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| panelWidth | number | 280 | Initial width of the panel in pixels |
+| panelResize | boolean | false | Whether the panel can be resized by the user |
+| children | ReactNode | null | Content to render inside the panel |
+| className | string | "" | Additional CSS class names |
+| style | CSSProperties | {} | Additional inline styles |
+
+### PanelLeftToolbar Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| panelTitle | string | "" | Title text to display in the toolbar |
+| panelIcon | ReactNode | null | Icon to display next to the title |
+| children | ReactNode | null | Additional content for the toolbar (buttons, etc.) |
+
+### Right Panel Props
+
+Right panels typically accept standard React props like `children`, `className`, and `style`.
+
+## Best Practices
+
+1. **Content Organization**: Keep panel content organized and minimal.
+2. **Visual Hierarchy**: Use proper sizing and spacing for list items.
+3. **Loading States**: Always show loading indicators when fetching data.
+4. **Error Handling**: Display user-friendly error messages.
+5. **Responsive Design**: Consider how panels will behave on smaller screens.
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Panels/UserCard.tsx b/src/frontend/src/coral/components/Panels/UserCard.tsx
new file mode 100644
index 000000000..ec393c9d5
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/UserCard.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import {
+ Avatar,
+ AvatarProps,
+ Body1Strong,
+ Caption1,
+} from "@fluentui/react-components";
+
+interface PanelUserCardProps extends AvatarProps {
+ name: string; // required for both Avatar and label
+ alias?: string; // optional sub-label
+}
+
+const PanelUserCard: React.FC = ({ name, alias, ...avatarProps }) => {
+ return (
+ = ({
+ progress,
+ size = 56,
+ strokeWidth = 8,
+ backgroundColor = "var(--colorNeutralBackground6)",
+ fillColor = "var(--colorPaletteSeafoamBorderActive)",
+ borderColor = "var(--colorNeutralStroke1)",
+}) => {
+ const circleRef = useRef(null);
+ const [hasMounted, setHasMounted] = useState(false);
+
+ const radius = (size - strokeWidth) / 2;
+ const circumference = 2 * Math.PI * radius;
+
+ useEffect(() => {
+ const circle = circleRef.current;
+ if (circle) {
+ const offset = circumference * (1 - progress);
+
+ if (hasMounted) {
+ circle.style.transition = "stroke-dashoffset 0.6s ease";
+ } else {
+ circle.style.transition = "none";
+ setHasMounted(true);
+ }
+
+ circle.style.strokeDashoffset = `${offset}`;
+ }
+ }, [progress, circumference, hasMounted]);
+
+ return (
+ = ({
+ title,
+ description,
+ icon,
+ onClick,
+ disabled = false, // π§ Default is false (enabled)
+}) => {
+ return (
+ {
+ if (!disabled) {
+ e.currentTarget.style.backgroundColor =
+ "var(--colorNeutralBackground4Hover)";
+ }
+ }}
+ onMouseOut={(e) => {
+ if (!disabled) {
+ e.currentTarget.style.backgroundColor =
+ "var(--colorNeutralBackground3)";
+ }
+ }}
+ >
+
+ );
+};
+
+export default PromptCard;
diff --git a/src/frontend/src/coral/components/eventbus.README.md b/src/frontend/src/coral/components/eventbus.README.md
new file mode 100644
index 000000000..807edaf14
--- /dev/null
+++ b/src/frontend/src/coral/components/eventbus.README.md
@@ -0,0 +1,226 @@
+# Event Bus
+
+The `eventbus.tsx` component provides a simple pub/sub (publish-subscribe) mechanism for decoupled communication between components across your Coral application.
+
+## Overview
+
+The Event Bus enables communication between components that:
+- Don't have a direct parent-child relationship
+- Are in different parts of the component tree
+- Need to communicate without prop drilling
+
+It follows the Observer pattern, allowing components to subscribe to events (topics) and react when those events are triggered by other components.
+
+## Basic Usage
+
+### Importing the Event Bus
+
+```jsx
+import eventBus from './eventbus';
+```
+
+### Subscribing to Events
+
+To listen for a specific event:
+
+```jsx
+// Event handler function
+const handleMyEvent = (data) => {
+ console.log('Event received with data:', data);
+ // Handle the event...
+};
+
+// Subscribe to an event
+eventBus.on('myEventName', handleMyEvent);
+```
+
+### Publishing Events
+
+To trigger an event:
+
+```jsx
+// Emit an event with optional data
+eventBus.emit('myEventName', { id: 123, value: 'example data' });
+```
+
+### Unsubscribing from Events
+
+Always unsubscribe when a component unmounts to prevent memory leaks:
+
+```jsx
+// Unsubscribe from an event
+eventBus.off('myEventName', handleMyEvent);
+```
+
+## Example in React Components
+
+### Component A (Event Publisher)
+
+```jsx
+import React from 'react';
+import eventBus from '../eventbus';
+import { Button } from '@fluentui/react-components';
+
+function ComponentA() {
+ const handleButtonClick = () => {
+ // Publish an event when button is clicked
+ eventBus.emit('itemSelected', {
+ id: '123',
+ name: 'Example Item',
+ details: 'This is an example item'
+ });
+ };
+
+ return (
+ | Promise;
+ onSaveMessage?: (
+ userId: string,
+ messages: { role: string; content: string }[]
+ ) => void;
+ onLoadHistory?: (
+ userId: string
+ ) => Promise<{ role: string; content: string }[]>;
+ onClearHistory?: (userId: string) => void;
+}
+
+const Chat: React.FC = ({
+ userId,
+ children,
+ onSendMessage,
+ onSaveMessage,
+ onLoadHistory,
+ onClearHistory,
+}) => {
+ const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
+ const [input, setInput] = useState("");
+ const [isTyping, setIsTyping] = useState(false);
+ const [showScrollButton, setShowScrollButton] = useState(false);
+ const [inputHeight, setInputHeight] = useState(0);
+ const [currentConversationId, setCurrentConversationId] = useState(undefined);
+
+ const messagesContainerRef = useRef(null);
+ const inputContainerRef = useRef(null);
+
+ useEffect(() => {
+ const loadHistory = async () => {
+ try {
+ if (onLoadHistory) {
+ const historyMessages = await onLoadHistory(userId);
+ if (historyMessages && historyMessages.length > 0) {
+ setMessages(historyMessages);
+ return;
+ }
+ }
+ // const chatMessages = await chatService.getUserHistory(userId);
+ // setMessages(chatMessages);
+ } catch (err) {
+ console.log("Failed to load chat history.", err);
+ }
+ };
+ loadHistory();
+ }, [onLoadHistory, userId]);
+
+ useEffect(() => {
+ if (messagesContainerRef.current) {
+ messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+ setShowScrollButton(false);
+ }
+ }, [messages]);
+
+ useEffect(() => {
+ const container = messagesContainerRef.current;
+ if (!container) return;
+ const handleScroll = () => {
+ const { scrollTop, scrollHeight, clientHeight } = container;
+ setShowScrollButton(scrollTop + clientHeight < scrollHeight - 100);
+ };
+ container.addEventListener("scroll", handleScroll);
+ return () => container.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ useEffect(() => {
+ if (inputContainerRef.current) {
+ setInputHeight(inputContainerRef.current.offsetHeight);
+ }
+ }, [input]);
+
+ const scrollToBottom = () => {
+ messagesContainerRef.current?.scrollTo({
+ top: messagesContainerRef.current.scrollHeight,
+ behavior: "smooth",
+ });
+ setShowScrollButton(false);
+ };
+
+ const handleCopy = (text: string) => {
+ navigator.clipboard.writeText(text).catch((err) => {
+ console.log("Failed to copy text:", err);
+ });
+ };
+
+ const isAsyncIterable = (value: any): value is AsyncIterable => {
+ return value !== null && typeof value === 'object' && Symbol.asyncIterator in value;
+ };
+
+ const sendMessage = async () => {
+ if (!input.trim()) return;
+
+ const updatedMessages = [...messages, { role: "user", content: input }];
+ setMessages(updatedMessages);
+ setInput("");
+ setIsTyping(true);
+
+ try {
+ if (onSendMessage) {
+ setMessages([...updatedMessages, { role: "assistant", content: "" }]);
+ const response = onSendMessage(input, updatedMessages);
+
+ if (isAsyncIterable(response)) {
+ let assistantContent = "";
+ for await (const chunk of response) {
+ assistantContent += chunk;
+ setMessages((prev) => {
+ const updated = [...prev];
+ updated[updated.length - 1] = {
+ role: "assistant",
+ content: assistantContent,
+ };
+ return updated;
+ });
+ }
+ onSaveMessage?.(userId, [...updatedMessages, { role: "assistant", content: assistantContent }]);
+ } else {
+ const assistantResponse = await response;
+ const newHistory = [...updatedMessages, { role: "assistant", content: assistantResponse }];
+ setMessages(newHistory);
+ onSaveMessage?.(userId, newHistory);
+ }
+ } else {
+ // const response = await chatService.sendMessage(userId, input, currentConversationId);
+ // setCurrentConversationId(response.conversation_id);
+ // const assistantMessage = { role: "assistant", content: response.assistant_response };
+ // setMessages([...updatedMessages, assistantMessage]);
+ }
+ } catch (err) {
+ console.log("Send Message Error:", err);
+ setMessages([
+ ...updatedMessages,
+ { role: "assistant", content: "Oops! Something went wrong sending your message." },
+ ]);
+ } finally {
+ setIsTyping(false);
+ }
+ };
+
+ const clearChat = async () => {
+ try {
+ if (onClearHistory) {
+ onClearHistory(userId);
+ } else {
+ // await chatService.clearChatHistory(userId);
+ }
+ setMessages([]);
+ setCurrentConversationId(undefined);
+ } catch (err) {
+ console.log("Failed to clear chat history:", err);
+ }
+ };
+
+ return (
+ (
+ (
+ {
+ value,
+ onChange,
+ onEnter,
+ placeholder = "Type a message...",
+ children,
+ disabledChat,
+ },
+ ref
+ ) => {
+ const [isFocused, setIsFocused] = useState(false);
+ const textareaRef = useRef(null);
+ const inputContainerRef = useRef(null);
+
+ // β
Allow parent to access textarea DOM node
+ useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);
+
+ useEffect(() => {
+ if (textareaRef.current) {
+ textareaRef.current.style.height = "auto";
+ textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+ }
+ }, [value]);
+
+ return (
+
{toolbar}
}
+
+
+ {content}
+
+
+ {panelResize && (
+ setIsHandleHovered(true)}
+ onMouseLeave={() => setIsHandleHovered(false)}
+ style={{
+ position: "absolute",
+ top: 0,
+ left: 0,
+ width: "2px",
+ height: "100%",
+ cursor: "ew-resize",
+ zIndex: 1,
+ backgroundColor: isHandleHovered
+ ? "var(--colorNeutralStroke2)"
+ : "transparent",
+ }}
+ />
+ )}
+
+ );
+};
+
+export default PanelRight;
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Panels/PanelRightToolbar.tsx b/src/frontend/src/coral/components/Panels/PanelRightToolbar.tsx
new file mode 100644
index 000000000..0fc3285f0
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/PanelRightToolbar.tsx
@@ -0,0 +1,90 @@
+import React, { ReactNode } from "react";
+import { Body1Strong, Button } from "@fluentui/react-components";
+import eventBus from "../eventbus.js";
+import { Dismiss } from "../../imports/bundleicons.js";
+
+interface PanelRightToolbarProps {
+ panelTitle?: string | null;
+ panelIcon?: ReactNode;
+ // panelType?: "first" | "second"; // Optional, defaults to "first"
+ children?: ReactNode;
+ handleDismiss?: () => void; // Add this line
+}
+
+const PanelRightToolbar: React.FC
+
+ );
+};
+
+export default PanelRightToolbar;
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/Panels/README.md b/src/frontend/src/coral/components/Panels/README.md
new file mode 100644
index 000000000..1f2e6b4f0
--- /dev/null
+++ b/src/frontend/src/coral/components/Panels/README.md
@@ -0,0 +1,332 @@
+# Panel Components
+
+Panel components provide specialized containers for navigation, filters, tools, and information displays that typically appear on the sides of your Coral application.
+
+## Components Overview
+
+- `PanelLeft`: Main left-side panel with resize capabilities
+- `PanelLeftToolbar`: Header area for the left panel with title and controls
+- `PanelRightFirst`, `PanelRightSecond`, etc.: Right-side panels for various purposes
+
+## Phase 1: UI Customization
+
+### PanelLeft Component
+
+The `PanelLeft` component creates a resizable left panel:
+
+```jsx
+
+ {panelIcon && (
+
+ {panelTitle}
+
+ )}
+
+
+ {panelIcon}
+
+ )}
+ {panelTitle && (
+
+ {children}
+ {/* }
+ onClick={handleDismiss} // Handle dismiss logic
+ aria-label="Close panel"
+ /> */}
+
+ -
+ {navItems.map(item => (
+
+ setSearchTerm(e.target.value)}
+ contentBefore={
+
+ -
+ {filteredItems.map(item => (
+
{error}
}
+
+ -
+ {items.map(item => (
+
-
+ {items.map(item => (
+
+
+ );
+};
+
+export default PanelUserCard;
diff --git a/src/frontend/src/coral/components/Progress/ProgressCircle.tsx b/src/frontend/src/coral/components/Progress/ProgressCircle.tsx
new file mode 100644
index 000000000..fc920b663
--- /dev/null
+++ b/src/frontend/src/coral/components/Progress/ProgressCircle.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState } from "react";
+
+interface ProgressCircleProps {
+ progress: number; // 0 to 1
+ size?: number;
+ strokeWidth?: number;
+ backgroundColor?: string;
+ fillColor?: string;
+ borderColor?: string;
+}
+
+const ProgressCircle: React.FC
+ {name}
+ {alias && (
+
+ {alias}
+
+ )}
+
+
+
+
+ {progress >= 1 && (
+
+ );
+};
+
+export default ProgressCircle;
diff --git a/src/frontend/src/coral/components/PromptCard.tsx b/src/frontend/src/coral/components/PromptCard.tsx
new file mode 100644
index 000000000..378660816
--- /dev/null
+++ b/src/frontend/src/coral/components/PromptCard.tsx
@@ -0,0 +1,76 @@
+// PromptCard.tsx
+import React from "react";
+import { Card } from "@fluentui/react-components";
+import { Body1, Body1Strong } from "@fluentui/react-components";
+
+type PromptCardProps = {
+ title: string;
+ description: string;
+ icon?: React.ReactNode;
+ onClick?: () => void;
+ disabled?: boolean; // β
New prop for disabling the card
+};
+
+const PromptCard: React.FC
+ π
+
+ )}
+
+ {icon && (
+
+
+ {icon}
+
+ )}
+
+ {title}
+
+ {description}
+
+
+
+
+
+ );
+}
+
+export default ComponentA;
+```
+
+### Component B (Event Subscriber)
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import eventBus from '../eventbus';
+
+function ComponentB() {
+ const [selectedItem, setSelectedItem] = useState(null);
+
+ useEffect(() => {
+ // Handler function
+ const handleItemSelected = (item) => {
+ setSelectedItem(item);
+ console.log('Item selected:', item);
+ };
+
+ // Subscribe when component mounts
+ eventBus.on('itemSelected', handleItemSelected);
+
+ // Unsubscribe when component unmounts
+ return () => {
+ eventBus.off('itemSelected', handleItemSelected);
+ };
+ }, []); // Empty dependency array ensures this runs only once on mount
+
+ return (
+
+
+ );
+}
+
+export default ComponentB;
+```
+
+## Common Use Cases
+
+1. **Panel Visibility Toggling**: Toggle right/left panels from header buttons
+ ```jsx
+ // In header component
+ eventBus.emit('togglePanel', { panelId: 'rightPanel', isVisible: true });
+
+ // In panel component
+ eventBus.on('togglePanel', ({ panelId, isVisible }) => {
+ if (panelId === 'rightPanel') {
+ setVisible(isVisible);
+ }
+ });
+ ```
+
+2. **Selection Synchronization**: Update multiple components when an item is selected
+ ```jsx
+ // In list component
+ eventBus.emit('itemSelected', selectedItem);
+
+ // In details component
+ eventBus.on('itemSelected', setCurrentItem);
+ ```
+
+3. **Global Notifications**: Show notifications across the application
+ ```jsx
+ // Trigger notification from anywhere
+ eventBus.emit('showNotification', {
+ message: 'Operation completed successfully',
+ type: 'success'
+ });
+
+ // In notification component
+ eventBus.on('showNotification', showNotification);
+ ```
+
+## Best Practices
+
+1. **Consistent Event Names**: Use a clear naming convention for events, such as:
+ - `verb:noun` (e.g., `select:item`, `toggle:panel`)
+ - `entityName:action` (e.g., `item:selected`, `panel:toggled`)
+
+2. **Typed Events**: For TypeScript applications, define interfaces for your event data:
+ ```typescript
+ interface ItemSelectedEvent {
+ id: string;
+ name: string;
+ category?: string;
+ }
+
+ // Emit with type
+ eventBus.emit('itemSelected', { id: '123', name: 'Example' } as ItemSelectedEvent);
+
+ // Handle with type
+ const handleItemSelected = (data: ItemSelectedEvent) => {
+ // Typed data
+ };
+ ```
+
+3. **Cleanup Subscriptions**: Always unsubscribe in the `useEffect` cleanup function or `componentWillUnmount` lifecycle method.
+
+4. **Documentation**: Document the events emitted and required payload for each component.
+
+5. **When to Use**: Only use the Event Bus when props or React Context are not suitable:
+ - Props: For direct parent-child communication
+ - Context: For state shared across a subtree of components
+ - Event Bus: For communication between unrelated components
+
+## Implementation Details
+
+The Event Bus is implemented using a simple JavaScript object that maintains a map of event names to arrays of handler functions:
+
+```typescript
+// Simplified implementation
+const eventBus = {
+ events: {},
+
+ on(event: string, callback: Function) {
+ if (!this.events[event]) {
+ this.events[event] = [];
+ }
+ this.events[event].push(callback);
+ },
+
+ off(event: string, callback: Function) {
+ if (this.events[event]) {
+ this.events[event] = this.events[event].filter(cb => cb !== callback);
+ }
+ },
+
+ emit(event: string, data?: any) {
+ if (this.events[event]) {
+ this.events[event].forEach(callback => callback(data));
+ }
+ }
+};
+
+export default eventBus;
+```
\ No newline at end of file
diff --git a/src/frontend/src/coral/components/eventbus.tsx b/src/frontend/src/coral/components/eventbus.tsx
new file mode 100644
index 000000000..eb3d36878
--- /dev/null
+++ b/src/frontend/src/coral/components/eventbus.tsx
@@ -0,0 +1,47 @@
+type EventCallback = (...args: any[]) => void;
+
+class EventBus {
+ private events: { [key: string]: EventCallback[] } = {};
+ private panelWidth: number = 400;
+ private activePanel: "first" | "second" | "third" | "fourth" | null = null;
+
+ on(event: string, callback: EventCallback) {
+ if (!this.events[event]) {
+ this.events[event] = [];
+ }
+ this.events[event].push(callback);
+ }
+
+ off(event: string, callback: EventCallback) {
+ if (!this.events[event]) return;
+ this.events[event] = this.events[event].filter(cb => cb !== callback);
+ }
+
+ emit(event: string, ...args: any[]) {
+ if (!this.events[event]) return;
+ this.events[event].forEach(callback => callback(...args));
+ }
+
+ // Panel control
+ setActivePanel(panel: "first" | "second" | "third" | "fourth" | null) {
+ this.activePanel = panel;
+ this.emit("setActivePanel", panel);
+ }
+
+ getActivePanel(): "first" | "second" | "third" | "fourth" | null {
+ return this.activePanel;
+ }
+
+ // Shared panel width
+ setPanelWidth(width: number) {
+ this.panelWidth = width;
+ this.emit("panelWidthChanged", width);
+ }
+
+ getPanelWidth(): number {
+ return this.panelWidth;
+ }
+}
+
+const eventBus = new EventBus();
+export default eventBus;
diff --git a/src/frontend/src/coral/imports/ContosoLogo.tsx b/src/frontend/src/coral/imports/ContosoLogo.tsx
new file mode 100644
index 000000000..af27010bc
--- /dev/null
+++ b/src/frontend/src/coral/imports/ContosoLogo.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const ContosoLogo: React.FC = () => {
+ return (
+
+ );
+};
+
+export default ContosoLogo;
diff --git a/src/frontend/src/coral/imports/MsftColor.tsx b/src/frontend/src/coral/imports/MsftColor.tsx
new file mode 100644
index 000000000..9b030d24a
--- /dev/null
+++ b/src/frontend/src/coral/imports/MsftColor.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const MicrosoftLogo: React.FC = () => {
+ return (
+
+ );
+};
+
+export default MicrosoftLogo;
diff --git a/src/frontend/src/coral/imports/Octopus.png b/src/frontend/src/coral/imports/Octopus.png
new file mode 100644
index 000000000..2394f4283
Binary files /dev/null and b/src/frontend/src/coral/imports/Octopus.png differ
diff --git a/src/frontend/src/coral/imports/bundleicons.tsx b/src/frontend/src/coral/imports/bundleicons.tsx
new file mode 100644
index 000000000..2b8e6432b
--- /dev/null
+++ b/src/frontend/src/coral/imports/bundleicons.tsx
@@ -0,0 +1,138 @@
+//DEV NOTES:
+//It's recommended to create bundleIcons for icons that nest within Fluent components and then import them into your project.
+// See full catalog of icons at https://react.fluentui.dev/?path=/docs/icons-catalog--docs.
+
+import {
+ ArrowExitFilled,
+ ArrowExitRegular,
+ BeakerFilled,
+ BeakerRegular,
+ BookmarkFilled,
+ BookmarkRegular,
+ CodeFilled,
+ CodeRegular,
+ CubeFilled,
+ CubeRegular,
+ DesignIdeasFilled,
+ DesignIdeasRegular,
+ DrawerArrowDownloadFilled,
+ DrawerArrowDownloadRegular,
+ FlowFilled,
+ FlowRegular,
+ FolderOpenFilled,
+ FolderOpenRegular,
+ LeafOneFilled,
+ LeafOneRegular,
+ LinkFilled,
+ LinkRegular,
+ OpenFilled,
+ OpenRegular,
+ OrganizationHorizontalFilled,
+ OrganizationHorizontalRegular,
+ PanelLeftContractFilled,
+ PanelLeftContractRegular,
+ PanelLeftExpandFilled,
+ PanelLeftExpandRegular,
+ PanelRightContractFilled,
+ PanelRightContractRegular,
+ PanelRightExpandFilled,
+ PanelRightExpandRegular,
+ PersonFilled,
+ PersonRegular,
+ PersonFeedbackFilled,
+ PersonFeedbackRegular,
+ SearchFilled,
+ SearchRegular,
+ SendFilled,
+ SendRegular,
+ ShareFilled,
+ ShareRegular,
+ TreeDeciduousFilled,
+ TreeDeciduousRegular,
+ TreeEvergreenFilled,
+ TreeEvergreenRegular,
+ WeatherMoonFilled,
+ WeatherMoonRegular,
+ WeatherSunnyFilled,
+ WeatherSunnyRegular,
+ DismissFilled,
+ DismissRegular,
+ DocumentSparkleFilled,
+ DocumentSparkleRegular,
+ SparkleFilled,
+ SparkleRegular,
+ StarFilled,
+ StarRegular,
+ MoreHorizontalFilled,
+ MoreHorizontalRegular,
+ bundleIcon,
+ CopyFilled,
+ CopyRegular,
+ HistoryFilled,
+ HistoryRegular,
+ TaskListSquareLtrFilled,
+ TaskListSquareLtrRegular,
+
+ } from "@fluentui/react-icons";
+
+ export const TaskListSquareLtr = bundleIcon(TaskListSquareLtrFilled, TaskListSquareLtrRegular);
+ export const History = bundleIcon(HistoryFilled, HistoryRegular);
+ export const Copy = bundleIcon(CopyFilled, CopyRegular);
+ export const Send = bundleIcon(SendFilled, SendRegular);
+ export const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
+ export const ArrowExit = bundleIcon(ArrowExitFilled, ArrowExitRegular);
+ export const Bookmark = bundleIcon(BookmarkFilled, BookmarkRegular);
+ export const Sparkle = bundleIcon(SparkleFilled, SparkleRegular);
+ export const Star = bundleIcon(StarFilled, StarRegular);
+ export const DocumentSparkle = bundleIcon(DocumentSparkleFilled, DocumentSparkleRegular);
+ export const Dismiss = bundleIcon(DismissFilled, DismissRegular);
+ export const DrawerArrowDownload = bundleIcon(DrawerArrowDownloadFilled, DrawerArrowDownloadRegular);
+ export const Beaker = bundleIcon(BeakerFilled, BeakerRegular);
+ export const Code = bundleIcon(CodeFilled, CodeRegular);
+ export const Cube = bundleIcon(CubeFilled, CubeRegular);
+ export const DesignIdeas = bundleIcon(DesignIdeasFilled, DesignIdeasRegular);
+ export const Flow = bundleIcon(FlowFilled, FlowRegular);
+ export const FolderOpen = bundleIcon(FolderOpenFilled, FolderOpenRegular);
+ export const LeafOne = bundleIcon(LeafOneFilled, LeafOneRegular);
+ export const Link = bundleIcon(LinkFilled, LinkRegular);
+ export const Open = bundleIcon(OpenFilled, OpenRegular);
+ export const OrganizationHorizontal = bundleIcon(
+ OrganizationHorizontalFilled,
+ OrganizationHorizontalRegular
+ );
+ export const PanelLeftContract = bundleIcon(
+ PanelLeftContractFilled,
+ PanelLeftContractRegular
+ );
+ export const PanelLeftExpand = bundleIcon(
+ PanelLeftExpandFilled,
+ PanelLeftExpandRegular
+ );
+ export const PanelRightContract = bundleIcon(
+ PanelRightContractFilled,
+ PanelRightContractRegular
+ );
+ export const PanelRightExpand = bundleIcon(
+ PanelRightExpandFilled,
+ PanelRightExpandRegular
+ );
+ export const Person = bundleIcon(PersonFilled, PersonRegular);
+ export const PersonFeedback = bundleIcon(
+ PersonFeedbackFilled,
+ PersonFeedbackRegular
+ );
+ export const Search = bundleIcon(SearchFilled, SearchRegular);
+ export const Share = bundleIcon(ShareFilled, ShareRegular);
+ export const TreeDeciduous = bundleIcon(
+ TreeDeciduousFilled,
+ TreeDeciduousRegular
+ );
+ export const TreeEvergreen = bundleIcon(
+ TreeEvergreenFilled,
+ TreeEvergreenRegular
+ );
+ export const WeatherMoon = bundleIcon(WeatherMoonFilled, WeatherMoonRegular);
+ export const WeatherSunny = bundleIcon(WeatherSunnyFilled, WeatherSunnyRegular);
+
+ export default {bundleIcon}
+
\ No newline at end of file
diff --git a/src/frontend/src/coral/imports/human.png b/src/frontend/src/coral/imports/human.png
new file mode 100644
index 000000000..cb7e8ea24
Binary files /dev/null and b/src/frontend/src/coral/imports/human.png differ
diff --git a/src/frontend/src/coral/modules/Chat.css b/src/frontend/src/coral/modules/Chat.css
new file mode 100644
index 000000000..e7e0a3ca8
--- /dev/null
+++ b/src/frontend/src/coral/modules/Chat.css
@@ -0,0 +1,304 @@
+.chat-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+
+ margin: 0 auto; /* β
centers it */
+}
+
+.messages {
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 0 16px 16px 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-left: 0;
+ margin-right: 0;
+
+ p {
+ margin: 8px 0;
+ white-space: pre-wrap;
+ line-height: 1.5rem;
+ }
+
+ li {
+ white-space: normal;
+ margin: 0;
+ }
+
+ ol,
+ ul {
+ display: block;
+ list-style-type: decimal;
+ margin-block-start: 0px;
+ margin-block-end: 0px;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ padding-inline-start: 24px;
+ unicode-bidi: isolate;
+ }
+
+ a {
+ color: var(--colorBrandForeground1);
+ }
+}
+
+code.language-tsx,
+code.language-bash {
+ white-space: pre-wrap;
+ word-break: break-word;
+ background-color: var(--colorNeutralBackground1);
+
+ border-radius: 4px;
+ /* border: 1px solid var(--colorNeutralStroke1); */
+}
+
+code.language-tsx {
+ display: flex;
+}
+
+pre {
+ display: inline-block;
+ /* Shrink-wrap to content */
+ max-width: 100%;
+ /* Do not exceed parent's width */
+ white-space: pre-wrap;
+ /* Allow wrapping of long lines */
+ word-break: break-word;
+ /* Break words if necessary */
+ overflow-wrap: break-word;
+ /* Provide fallback for older browsers */
+ background-color: var(--colorNeutralBackground1);
+ padding: 4px 8px;
+ border-radius: 4px;
+ overflow: scroll;
+}
+
+pre code.language-bash {
+ white-space: pre-wrap;
+ word-break: break-word;
+ overflow-wrap: break-word;
+
+ /* Optional: add padding, background, border-radius, etc. */
+ background-color: transparent;
+}
+
+.message {
+ /* Prevents messages from getting too wide */
+ display: inline-block;
+ /* Ensures width only expands as needed */
+ word-wrap: break-word;
+ /* Prevents overflow issues */
+ word-break: break-word;
+
+ box-sizing: border-box;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+}
+
+.user {
+ background-color: var(--colorNeutralBackground2);
+ color: var(--colorNeutralForeground2);
+ align-self: flex-end;
+ padding: 2px 16px;
+ border-radius: 6px;
+}
+
+.assistant {
+ color: var(--colorNeutralForeground2);
+ align-self: flex-start;
+ margin: 16px 0 0 0;
+ width: 100%;
+}
+
+.input-container {
+ display: flex;
+ /* padding: 16px; */
+ /* border-top: 1px solid #ccc; */
+}
+
+input {
+ flex: 1;
+ padding: 5px;
+ border: 1px solid #ccc;
+}
+
+button {
+ margin-left: 5px;
+ padding: 5px 10px;
+ background-color: #0078d4;
+ color: white;
+ border: none;
+ cursor: pointer;
+}
+
+.typing-indicator {
+ font-size: 14px;
+ color: #666;
+}
+
+.typing-indicator .dots {
+ animation: blink 1.5s infinite;
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 0.3;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0.3;
+ }
+}
+
+/* Input Container */
+.input-wrapper {
+ /* margin: 0 16px 16px 16px; */
+ display: inline-flex;
+ /* Allows height to expand dynamically */
+ flex-direction: column;
+ gap: 8px;
+ align-items: stretch;
+ width: 100%;
+ padding: 8px;
+ border-radius: var(--borderRadiusLarge);
+ background-color: var(--colorNeutralBackground1);
+ border: 1px solid var(--colorNeutralStroke1);
+ transition: border-color 0.2s ease-in-out;
+ position: relative;
+ box-sizing: border-box;
+}
+
+/* Hover and Active States */
+.input-wrapper:hover {
+ border-color: var(--colorNeutralStroke1Hover);
+}
+
+.input-wrapper:active {
+ border-color: var(--colorNeutralStroke1Pressed);
+}
+
+/* Focus State */
+.input-wrapper.focused {
+ border-color: var(--colorNeutralStroke1Pressed);
+}
+
+/* Input Field */
+.input-field {
+ resize: none;
+ overflow-y: scroll;
+ height: auto;
+ /* Ensures it expands dynamically */
+ min-height: 24px;
+ /* Keeps it stable initially and while typing */
+ max-height: 150px;
+ padding: 8px;
+ /* Add padding while maintaining the height */
+ background-color: transparent;
+ border: none;
+ outline: none;
+ font-family: var(--fontFamilyBase);
+ font-size: var(--fontSizeBase300);
+ font-weight: var(--fontWeightRegular);
+ color: var(--colorNeutralForeground1);
+ line-height: 1.5;
+ box-sizing: border-box;
+ /* Ensures padding doesnβt increase total height */
+}
+
+/* Send Button */
+.send-button {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ padding: 4px 8px;
+ color: var(--colorBrandForeground1);
+ transition: color 0.2s ease-in-out;
+}
+
+.send-button:hover {
+ color: var(--colorBrandForegroundHover);
+}
+
+.send-button:active {
+ color: var(--colorBrandForegroundPressed);
+}
+
+/* Focus Indicator (Purple Line Animation, Bottom Only) */
+.focus-indicator {
+ position: absolute;
+ bottom: 0;
+ /* Ensures it's at the bottom */
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background-color: var(--colorCompoundBrandStroke);
+ transform: scaleX(0);
+ transition: transform 0.2s ease-in-out;
+}
+
+.input-wrapper.focused .focus-indicator {
+ transform: scaleX(1);
+ /* Expands when input is focused */
+}
+
+/* AI Generated Tag Container */
+.ai-tag-container {
+ margin-bottom: 4px;
+ /* Adds a small gap between the tag and the message */
+ display: flex;
+ align-items: center;
+}
+
+.assistant-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 6px;
+ margin-left: -10px;
+}
+
+.assistant-actions {
+ display: flex;
+ /* gap: 8px; */
+}
+
+.messages {
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ display: flex;
+
+ align-items: center;
+ padding: 0 16px 16px 16px;
+}
+
+.message-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 100%;
+ max-width: 768px;
+
+}
+
+.scroll-to-bottom {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1000;
+ /* Optional styling */
+ border-radius: 50%;
+ padding: 8px;
+ cursor: pointer;
+ box-shadow: var(--shadow8);
+ margin-bottom: 16px;
+}
diff --git a/src/frontend/src/coral/modules/Chat.tsx b/src/frontend/src/coral/modules/Chat.tsx
new file mode 100644
index 000000000..74f5590e7
--- /dev/null
+++ b/src/frontend/src/coral/modules/Chat.tsx
@@ -0,0 +1,278 @@
+import React, { useState, useEffect, useRef } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypePrism from "rehype-prism";
+import {
+ Body1,
+ Button,
+ Tag,
+ Tooltip as FluentTooltip,
+ ToolbarDivider,
+} from "@fluentui/react-components";
+import { Copy, Send } from "../imports/bundleicons";
+import { ChatDismiss20Regular, HeartRegular } from "@fluentui/react-icons";
+import ChatInput from "./ChatInput";
+import "./Chat.css";
+import "./prism-material-oceanic.css";
+// import { chatService } from "../services/chatService";
+import HeaderTools from "../components/Header/HeaderTools";
+
+interface ChatProps {
+ userId: string;
+ children?: React.ReactNode;
+ onSendMessage?: (
+ input: string,
+ history: { role: string; content: string }[]
+ ) => AsyncIterableSelected Item:
+ {selectedItem ? ( +
+
+ ) : (
+ ID: {selectedItem.id}
+Name: {selectedItem.name}
+Details: {selectedItem.details}
+No item selected
+ )} +
+
+ Back to bottom
+
+ )}
+
+
+ );
+};
+
+export default Chat;
diff --git a/src/frontend/src/coral/modules/ChatExample.tsx b/src/frontend/src/coral/modules/ChatExample.tsx
new file mode 100644
index 000000000..66aed981a
--- /dev/null
+++ b/src/frontend/src/coral/modules/ChatExample.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import '../components/Content/Chat.css';
+
+/**
+ * ChatExample - A component that mimics the conversation flow seen in the UI mockup
+ */
+const ChatExample: React.FC = () => {
+ return (
+
+
+
+ {showScrollButton && (
+ {messages.map((msg, index) => (
+
+
+
+ {isTyping && (
+
+
+
+
+ ))}
+
+ {msg.content}
+
+ {msg.role === "assistant" && (
+
+
+
+ )}
+
+
+
+ Thinking...
+
+ )}
+
+
+
+
+
+
+ }
+ disabled={isTyping || !input.trim()}
+ />
+
+ {messages.length > 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default ChatExample;
\ No newline at end of file
diff --git a/src/frontend/src/coral/modules/ChatInput.tsx b/src/frontend/src/coral/modules/ChatInput.tsx
new file mode 100644
index 000000000..98c1a476c
--- /dev/null
+++ b/src/frontend/src/coral/modules/ChatInput.tsx
@@ -0,0 +1,163 @@
+import React, {
+ useRef,
+ useState,
+ useEffect,
+ forwardRef,
+ useImperativeHandle,
+} from "react";
+import {
+ Tag,
+ Tooltip as FluentTooltip,
+ Caption1,
+} from "@fluentui/react-components";
+import HeaderTools from "../components/Header/HeaderTools";
+
+// β
Props definition
+interface ChatInputProps {
+ value: string;
+ onChange: (val: string) => void;
+ onEnter?: () => void;
+ placeholder?: string;
+ children?: React.ReactNode;
+ disabledChat?: boolean;
+}
+
+// β
ForwardRef component
+const ChatInput = forwardRef
+ {/* System action message */}
+
+
+ {/* Input area */}
+
+
+
+ {/* Bot message */}
+
+ Help me start onboarding Jessica.
+
+
+
+
+ {/* System action message */}
+
+
+ HR Agent
+ BOT
+
+ Sounds good! Want me to start with a background check?
+
+
+
+
+
+
+
+
+
+ {/* Bot message */}
+
+ Yup!
+
+
+
+
+ {/* System action message */}
+
+
+ HR Agent
+ BOT
+
+ You got it! I've initiated a background check and everything looks good to goβ You're ready to move onto helping Jessica set up and Office 365 account. Want me to hand that over to your Manager Agent?
+
+
+
+
+
+
+
+
+
+ {/* Bot message */}
+
+ Let's skip that step for now
+
+
+
+
+ {/* System action message */}
+
+
+ HR Agent
+ BOT
+
+ Alright, let's skip Office 365 onboarding.
+
+ Want to move onto helping get her set up with a laptop for now? I can call your IT Agent.
+
+
+
+
+
+
+
+
+
+ {/* Bot message */}
+
+ Let's do it!
+
+
+
+
+
+ IT Agent
+ BOT
+
+ Nice move - okay we've set her up with a Surface Laptop 15 with a Snapdragon Elite. Given her role as a Product Manager, this should be more than enough power to get her killing it through her workflows.
+
+ We can now move onto registering her with benefitβ want me to get that going?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ IT Agent and HR Agent are working together...
+ AI-generated content may be incorrect
+
+
-
-
-
-
-
-
+
-
-
-
-
-
- 
-
-
-
-
-
-
- Quick tasks
-
-
-
-
-
-
-
-
- Mobile plan query -
- - Mobile plan query -
I'm looking for information about a roaming plan as I'm headed overseas.
-
-
-
-
-
-
- Buy add-on pack -
- - Buy add-on pack -
Please enable roaming on my mobile plan, starting next week.
-
-
-
-
-
-
- Onboard employee -
-
- - Onboard employee -
Onboard a new employee, Jessica Smith.
-
-
-
-
-
-
-
- Draft a press release -
-
- - Draft a press release -
Get info about our products. Write a press release about our current products.
--