diff --git a/.github/workflows/CAdeploy.yml b/.github/workflows/CAdeploy.yml
new file mode 100644
index 000000000..9dc156edc
--- /dev/null
+++ b/.github/workflows/CAdeploy.yml
@@ -0,0 +1,128 @@
+name: CI-Validate Deployment-Client Advisor
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'ClientAdvisor/**'   
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Azure CLI
+        run: |
+          curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
+          az --version  # Verify installation
+
+      - name: Login to Azure
+        run: |
+          az login --service-principal -u ${{ secrets.AZURE_CLIENT_ID }} -p ${{ secrets.AZURE_CLIENT_SECRET }} --tenant ${{ secrets.AZURE_TENANT_ID }}
+
+      - name: Install Bicep CLI
+        run: az bicep install
+
+      - name: Generate Resource Group Name
+        id: generate_rg_name
+        run: |
+          echo "Generating a unique resource group name..."
+          TIMESTAMP=$(date +%Y%m%d%H%M%S)
+          COMMON_PART="pslautomationCli"
+          UNIQUE_RG_NAME="${COMMON_PART}${TIMESTAMP}"
+          echo "RESOURCE_GROUP_NAME=${UNIQUE_RG_NAME}" >> $GITHUB_ENV
+          echo "Generated RESOURCE_GROUP_PREFIX: ${UNIQUE_RG_NAME}"
+      
+      - name: Check and Create Resource Group
+        id: check_create_rg
+        run: |
+          echo "RESOURCE_GROUP: ${{ env.RESOURCE_GROUP_NAME }}"
+          set -e  
+          echo "Checking if resource group exists..."
+          rg_exists=$(az group exists --name ${{ env.RESOURCE_GROUP_NAME }})
+          if [ "$rg_exists" = "false" ]; then
+            echo "Resource group does not exist. Creating..."
+            az group create --name ${{ env.RESOURCE_GROUP_NAME }} --location uksouth || { echo "Error creating resource group"; exit 1; }
+          else
+            echo "Resource group already exists."
+          fi
+      
+      - name: Generate Unique Solution Prefix
+        id: generate_solution_prefix
+        run: |
+          set -e
+          COMMON_PART="pslc"
+          TIMESTAMP=$(date +%s)  
+          UPDATED_TIMESTAMP=$(echo $TIMESTAMP | tail -c 3) 
+          UNIQUE_SOLUTION_PREFIX="${COMMON_PART}${UPDATED_TIMESTAMP}"
+          echo "SOLUTION_PREFIX=${UNIQUE_SOLUTION_PREFIX}" >> $GITHUB_ENV
+          echo "Generated SOLUTION_PREFIX: ${UNIQUE_SOLUTION_PREFIX}"
+          
+      - name: Deploy Bicep Template
+        id: deploy
+        run: |
+          set -e
+          az deployment group create \
+            --resource-group ${{ env.RESOURCE_GROUP_NAME }} \
+            --template-file ClientAdvisor/Deployment/bicep/main.bicep \
+            --parameters solutionPrefix=${{ env.SOLUTION_PREFIX }} cosmosLocation=eastus2
+
+      - name: Update PowerBI URL
+        if: success()
+        run: |
+          set -e
+
+          COMMON_PART="-app-service"
+          application_name="${{ env.SOLUTION_PREFIX }}${COMMON_PART}"
+          echo "Updating application: $application_name"
+          
+          # Log the Power BI URL being set
+          echo "Setting Power BI URL: ${{ vars.VITE_POWERBI_EMBED_URL }}"
+          
+          # Update the application settings
+          az webapp config appsettings set --name "$application_name" --resource-group "${{ env.RESOURCE_GROUP_NAME }}" --settings VITE_POWERBI_EMBED_URL="${{ vars.VITE_POWERBI_EMBED_URL }}"
+
+          # Restart the web app
+          az webapp restart --resource-group "${{ env.RESOURCE_GROUP_NAME }}" --name "$application_name"
+
+          echo "Power BI URL updated successfully for application: $application_name."
+
+      - name: Delete Bicep Deployment
+        if: success()
+        run: |
+          set -e  
+          echo "Checking if resource group exists..."
+          rg_exists=$(az group exists --name ${{ env.RESOURCE_GROUP_NAME }})
+          if [ "$rg_exists" = "true" ]; then
+            echo "Resource group exist. Cleaning..."
+            az group delete \
+                --name ${{ env.RESOURCE_GROUP_NAME }} \
+                --yes \
+                --no-wait
+            echo "Resource group deleted...  ${{ env.RESOURCE_GROUP_NAME }}"
+          else
+            echo "Resource group does not exists."
+          fi
+      
+      - name: Send Notification on Failure
+        if: failure()
+        run: |
+          RUN_URL="https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+      
+          # Construct the email body
+          EMAIL_BODY=$(cat <<EOF
+          {
+            "body": "<p>Dear Team,</p><p>We would like to inform you that the Client Advisor Automation process has encountered an issue and has failed to complete successfully.</p><p><strong>Build URL:</strong> ${RUN_URL}<br> ${OUTPUT}</p><p>Please investigate the matter at your earliest convenience.</p><p>Best regards,<br>Your Automation Team</p>"
+          }
+          EOF
+          )
+      
+          # Send the notification
+          curl -X POST "${{ secrets.LOGIC_APP_URL }}" \
+            -H "Content-Type: application/json" \
+            -d "$EMAIL_BODY" || echo "Failed to send notification"
+
diff --git a/.github/workflows/RAdeploy.yml b/.github/workflows/RAdeploy.yml
new file mode 100644
index 000000000..61bdf0e71
--- /dev/null
+++ b/.github/workflows/RAdeploy.yml
@@ -0,0 +1,105 @@
+name: CI-Validate Deployment-Research Assistant
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'ResearchAssistant/**'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Azure CLI
+        run: |
+          curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
+          az --version  # Verify installation
+
+      - name: Login to Azure
+        run: |
+          az login --service-principal -u ${{ secrets.AZURE_CLIENT_ID }} -p ${{ secrets.AZURE_CLIENT_SECRET }} --tenant ${{ secrets.AZURE_TENANT_ID }}
+
+      - name: Install Bicep CLI
+        run: az bicep install
+
+      - name: Generate Resource Group Name
+        id: generate_rg_name
+        run: |
+          echo "Generating a unique resource group name..."
+          TIMESTAMP=$(date +%Y%m%d%H%M%S)
+          COMMON_PART="pslautomationRes"
+          UNIQUE_RG_NAME="${COMMON_PART}${TIMESTAMP}"
+          echo "RESOURCE_GROUP_NAME=${UNIQUE_RG_NAME}" >> $GITHUB_ENV
+          echo "Generated Resource_GROUP_PREFIX: ${UNIQUE_RG_NAME}" 
+      
+      - name: Check and Create Resource Group
+        id: check_create_rg
+        run: |
+          set -e  
+          echo "Checking if resource group exists..."
+          rg_exists=$(az group exists --name ${{ env.RESOURCE_GROUP_NAME }})
+          if [ "$rg_exists" = "false" ]; then
+            echo "Resource group does not exist. Creating..."
+            az group create --name ${{ env.RESOURCE_GROUP_NAME }} --location eastus2 || { echo "Error creating resource group"; exit 1; }
+          else
+            echo "Resource group already exists."
+          fi
+
+      - name: Generate Unique Solution Prefix
+        id: generate_solution_prefix
+        run: |
+          set -e
+          COMMON_PART="pslr"
+          TIMESTAMP=$(date +%s)  
+          UPDATED_TIMESTAMP=$(echo $TIMESTAMP | tail -c 3) 
+          UNIQUE_SOLUTION_PREFIX="${COMMON_PART}${UPDATED_TIMESTAMP}"
+          echo "SOLUTION_PREFIX=${UNIQUE_SOLUTION_PREFIX}" >> $GITHUB_ENV
+          echo "Generated SOLUTION_PREFIX: ${UNIQUE_SOLUTION_PREFIX}" 
+
+      - name: Deploy Bicep Template
+        id: deploy
+        run: |
+          set -e
+          az deployment group create \
+            --resource-group ${{ env.RESOURCE_GROUP_NAME }} \
+            --template-file ResearchAssistant/Deployment/bicep/main.bicep \
+            --parameters solutionPrefix=${{ env.SOLUTION_PREFIX }}
+            
+      - name: Delete Bicep Deployment
+        if: success()
+        run: |
+          set -e  
+          echo "Checking if resource group exists..."
+          rg_exists=$(az group exists --name ${{ env.RESOURCE_GROUP_NAME }})
+          if [ "$rg_exists" = "true" ]; then
+            echo "Resource group exist. Cleaning..."
+            az group delete \
+                --name ${{ env.RESOURCE_GROUP_NAME }} \
+                --yes \
+                --no-wait
+            echo "Resource group deleted...  ${{ env.RESOURCE_GROUP_NAME }}"
+          else
+            echo "Resource group does not exists."
+          fi
+
+      - name: Send Notification on Failure
+        if: failure()
+        run: |
+          RUN_URL="https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+      
+          # Construct the email body
+          EMAIL_BODY=$(cat <<EOF
+          {
+            "body": "<p>Dear Team,</p><p>We would like to inform you that the Research Assistant Automation process has encountered an issue and has failed to complete successfully.</p><p><strong>Build URL:</strong> ${RUN_URL}<br> ${OUTPUT}</p><p>Please investigate the matter at your earliest convenience.</p><p>Best regards,<br>Your Automation Team</p>"
+          }
+          EOF
+          )
+      
+          # Send the notification
+          curl -X POST "${{ secrets.LOGIC_APP_URL }}" \
+            -H "Content-Type: application/json" \
+            -d "$EMAIL_BODY" || echo "Failed to send notification"
\ No newline at end of file
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 000000000..5f6ba6220
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,94 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '22 13 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        - language: python
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"
diff --git a/.github/workflows/pylint.yml b/.github/workflows/pylint.yml
new file mode 100644
index 000000000..989f73871
--- /dev/null
+++ b/.github/workflows/pylint.yml
@@ -0,0 +1,22 @@
+name: Pylint
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.11"]
+    steps:
+    - uses: actions/checkout@v4
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v3
+      with:
+        python-version: ${{ matrix.python-version }}
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r ClientAdvisor/App/requirements.txt
+    - name: Run flake8
+      run: flake8 --config=ClientAdvisor/App/.flake8 ClientAdvisor/App
diff --git a/.github/workflows/test_client_advisor.yml b/.github/workflows/test_client_advisor.yml
new file mode 100644
index 000000000..f9a29716b
--- /dev/null
+++ b/.github/workflows/test_client_advisor.yml
@@ -0,0 +1,55 @@
+name: Tests
+
+on:
+  push:
+    branches: main
+    # Trigger on changes in these specific paths
+    paths:
+      - 'ClientAdvisor/**'
+  pull_request:
+    branches: main
+    types:
+      - opened
+      - ready_for_review
+      - reopened
+      - synchronize
+    paths:
+      - 'ClientAdvisor/**'
+
+jobs:
+  test_client_advisor:
+    
+    name: Client Advisor Tests
+    runs-on: ubuntu-latest
+    # The if condition ensures that this job only runs if changes are in the ClientAdvisor folder
+    
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+      - name: Install Backend Dependencies
+        run: |
+          cd ClientAdvisor/App
+          python -m pip install -r requirements.txt
+          python -m pip install coverage pytest-cov
+     
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+      - name: Install Frontend Dependencies
+        run: |
+          cd ClientAdvisor/App/frontend
+          npm install
+      - name: Run Frontend Tests with Coverage
+        run: |
+          cd ClientAdvisor/App/frontend
+          npm run test -- --coverage
+      - uses: actions/upload-artifact@v4
+        with:
+          name: client-advisor-frontend-coverage
+          path: |
+            ClientAdvisor/App/frontend/coverage/
+            ClientAdvisor/App/frontend/coverage/lcov-report/
\ No newline at end of file
diff --git a/.github/workflows/test_research_assistant.yml b/.github/workflows/test_research_assistant.yml
new file mode 100644
index 000000000..ec31819ba
--- /dev/null
+++ b/.github/workflows/test_research_assistant.yml
@@ -0,0 +1,54 @@
+name: Tests
+
+on:
+  push:
+    branches: main
+    # Trigger on changes in these specific paths
+    paths:
+      - 'ResearchAssistant/**'
+  pull_request:
+    branches: main
+    types:
+      - opened
+      - ready_for_review
+      - reopened
+      - synchronize
+    paths:
+      - 'ResearchAssistant/**'
+
+jobs:
+  test_research_assistant:
+    name: Research Assistant Tests
+    runs-on: ubuntu-latest
+    # The if condition ensures that this job only runs if changes are in the ResearchAssistant folder
+    
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+      - name: Install Backend Dependencies
+        run: |
+          cd ResearchAssistant/App
+          python -m pip install -r requirements.txt
+          python -m pip install coverage pytest-cov
+      
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+      - name: Install Frontend Dependencies
+        run: |
+          cd ResearchAssistant/App/frontend
+          npm install
+      - name: Run Frontend Tests with Coverage
+        run: |
+          cd ResearchAssistant/App/frontend
+          npm run test -- --coverage
+      - uses: actions/upload-artifact@v4
+        with:
+          name: research-assistant-frontend-coverage
+          path: |
+            ResearchAssistant/App/frontend/coverage/
+            ResearchAssistant/App/frontend/coverage/lcov-report/
\ No newline at end of file
diff --git a/ClientAdvisor/App/.flake8 b/ClientAdvisor/App/.flake8
new file mode 100644
index 000000000..c462975ac
--- /dev/null
+++ b/ClientAdvisor/App/.flake8
@@ -0,0 +1,4 @@
+[flake8]
+max-line-length = 88
+extend-ignore = E501, E203
+exclude = .venv, frontend, 
\ No newline at end of file
diff --git a/ClientAdvisor/App/.gitignore b/ClientAdvisor/App/.gitignore
index cf6d66c97..bb12c4b8b 100644
--- a/ClientAdvisor/App/.gitignore
+++ b/ClientAdvisor/App/.gitignore
@@ -17,6 +17,7 @@ lib/
 
 .venv
 frontend/node_modules
+frontend/coverage
 .env
 # static
 .azure/
diff --git a/ClientAdvisor/App/app.py b/ClientAdvisor/App/app.py
index ff5647552..a32c72b27 100644
--- a/ClientAdvisor/App/app.py
+++ b/ClientAdvisor/App/app.py
@@ -7,7 +7,6 @@
 import httpx
 import time
 import requests
-import pymssql
 from types import SimpleNamespace
 from db import get_connection
 from quart import (
@@ -18,23 +17,20 @@
     request,
     send_from_directory,
     render_template,
-    session
 )
+
 # from quart.sessions import SecureCookieSessionInterface
 from openai import AsyncAzureOpenAI
 from azure.identity.aio import DefaultAzureCredential, get_bearer_token_provider
 from backend.auth.auth_utils import get_authenticated_user_details, get_tenantid
 from backend.history.cosmosdbservice import CosmosConversationClient
-# from flask import Flask
-# from flask_cors import CORS
-import secrets
+
 
 from backend.utils import (
     format_as_ndjson,
     format_stream_response,
     generateFilterString,
     parse_multi_columns,
-    format_non_streaming_response,
     convert_to_pf_format,
     format_pf_non_streaming_response,
 )
@@ -297,6 +293,7 @@ async def assets(path):
 
 VITE_POWERBI_EMBED_URL = os.environ.get("VITE_POWERBI_EMBED_URL")
 
+
 def should_use_data():
     global DATASOURCE_TYPE
     if AZURE_SEARCH_SERVICE and AZURE_SEARCH_INDEX:
@@ -762,16 +759,18 @@ def prepare_model_args(request_body, request_headers):
             messages.append({"role": message["role"], "content": message["content"]})
 
     user_json = None
-    if (MS_DEFENDER_ENABLED):
+    if MS_DEFENDER_ENABLED:
         authenticated_user_details = get_authenticated_user_details(request_headers)
         tenantId = get_tenantid(authenticated_user_details.get("client_principal_b64"))
-        conversation_id = request_body.get("conversation_id", None)        
+        conversation_id = request_body.get("conversation_id", None)
         user_args = {
-            "EndUserId": authenticated_user_details.get('user_principal_id'),
-            "EndUserIdType": 'Entra',
+            "EndUserId": authenticated_user_details.get("user_principal_id"),
+            "EndUserIdType": "Entra",
             "EndUserTenantId": tenantId,
             "ConversationId": conversation_id,
-            "SourceIp": request_headers.get('X-Forwarded-For', request_headers.get('Remote-Addr', '')),
+            "SourceIp": request_headers.get(
+                "X-Forwarded-For", request_headers.get("Remote-Addr", "")
+            ),
         }
         user_json = json.dumps(user_args)
 
@@ -831,6 +830,7 @@ def prepare_model_args(request_body, request_headers):
 
     return model_args
 
+
 async def promptflow_request(request):
     try:
         headers = {
@@ -864,70 +864,78 @@ async def promptflow_request(request):
         logging.error(f"An error occurred while making promptflow_request: {e}")
 
 
-
 async def send_chat_request(request_body, request_headers):
     filtered_messages = []
     messages = request_body.get("messages", [])
     for message in messages:
-        if message.get("role") != 'tool':
+        if message.get("role") != "tool":
             filtered_messages.append(message)
-            
-    request_body['messages'] = filtered_messages
+
+    request_body["messages"] = filtered_messages
     model_args = prepare_model_args(request_body, request_headers)
 
     try:
         azure_openai_client = init_openai_client()
-        raw_response = await azure_openai_client.chat.completions.with_raw_response.create(**model_args)
+        raw_response = (
+            await azure_openai_client.chat.completions.with_raw_response.create(
+                **model_args
+            )
+        )
         response = raw_response.parse()
-        apim_request_id = raw_response.headers.get("apim-request-id") 
+        apim_request_id = raw_response.headers.get("apim-request-id")
     except Exception as e:
         logging.exception("Exception in send_chat_request")
         raise e
     return response, apim_request_id
 
+
 async def complete_chat_request(request_body, request_headers):
     if USE_PROMPTFLOW and PROMPTFLOW_ENDPOINT and PROMPTFLOW_API_KEY:
         response = await promptflow_request(request_body)
         history_metadata = request_body.get("history_metadata", {})
         return format_pf_non_streaming_response(
-            response, history_metadata, PROMPTFLOW_RESPONSE_FIELD_NAME, PROMPTFLOW_CITATIONS_FIELD_NAME
+            response,
+            history_metadata,
+            PROMPTFLOW_RESPONSE_FIELD_NAME,
+            PROMPTFLOW_CITATIONS_FIELD_NAME,
         )
     elif USE_AZUREFUNCTION:
         request_body = await request.get_json()
-        client_id =  request_body.get('client_id')
+        client_id = request_body.get("client_id")
         print(request_body)
 
         if client_id is None:
             return jsonify({"error": "No client ID provided"}), 400
         # client_id = '10005'
         print("Client ID in complete_chat_request: ", client_id)
-        answer = "Sample response from Azure Function"
-                # Construct the URL of your Azure Function endpoint
-        function_url = STREAMING_AZUREFUNCTION_ENDPOINT
-
-        request_headers = {
-            'Content-Type': 'application/json',
-            # 'Authorization': 'Bearer YOUR_TOKEN_HERE'  # if applicable
-        }
+        # answer = "Sample response from Azure Function"
+        # Construct the URL of your Azure Function endpoint
+        # function_url = STREAMING_AZUREFUNCTION_ENDPOINT
+
+        # request_headers = {
+        #     "Content-Type": "application/json",
+        #     # 'Authorization': 'Bearer YOUR_TOKEN_HERE'  # if applicable
+        # }
         # print(request_body.get("messages")[-1].get("content"))
         # print(request_body)
 
         query = request_body.get("messages")[-1].get("content")
 
-
         print("Selected ClientId:", client_id)
         # print("Selected ClientName:", selected_client_name)
 
         # endpoint = STREAMING_AZUREFUNCTION_ENDPOINT + '?query=' + query + ' - for Client ' + selected_client_name + ':::' + selected_client_id
-        endpoint = STREAMING_AZUREFUNCTION_ENDPOINT + '?query=' + query  + ':::' + client_id
+        endpoint = (
+            STREAMING_AZUREFUNCTION_ENDPOINT + "?query=" + query + ":::" + client_id
+        )
 
         print("Endpoint: ", endpoint)
-        query_response = ''
+        query_response = ""
         try:
-            with requests.get(endpoint,stream=True) as r:
+            with requests.get(endpoint, stream=True) as r:
                 for line in r.iter_lines(chunk_size=10):
                     # query_response += line.decode('utf-8')
-                    query_response = query_response + '\n' + line.decode('utf-8')
+                    query_response = query_response + "\n" + line.decode("utf-8")
                     # print(line.decode('utf-8'))
         except Exception as e:
             print(format_as_ndjson({"error" + str(e)}))
@@ -940,11 +948,9 @@ async def complete_chat_request(request_body, request_headers):
             "model": "",
             "created": 0,
             "object": "",
-            "choices": [{
-                "messages": []
-            }],
+            "choices": [{"messages": []}],
             "apim-request-id": "",
-            'history_metadata': history_metadata
+            "history_metadata": history_metadata,
         }
 
         response["id"] = str(uuid.uuid4())
@@ -952,76 +958,84 @@ async def complete_chat_request(request_body, request_headers):
         response["created"] = int(time.time())
         response["object"] = "extensions.chat.completion.chunk"
         # response["apim-request-id"] = headers.get("apim-request-id")
-        response["choices"][0]["messages"].append({
-            "role": "assistant",
-            "content": query_response
-        })
-        
+        response["choices"][0]["messages"].append(
+            {"role": "assistant", "content": query_response}
+        )
 
         return response
 
+
 async def stream_chat_request(request_body, request_headers):
     if USE_AZUREFUNCTION:
         history_metadata = request_body.get("history_metadata", {})
         function_url = STREAMING_AZUREFUNCTION_ENDPOINT
-        apim_request_id = ''
-        
-        client_id =  request_body.get('client_id')    
+        apim_request_id = ""
+
+        client_id = request_body.get("client_id")
         if client_id is None:
             return jsonify({"error": "No client ID provided"}), 400
         query = request_body.get("messages")[-1].get("content")
+        query = query.strip()
 
         async def generate():
-            deltaText = ''
-            #async for completionChunk in response:
+            deltaText = ""
+            # async for completionChunk in response:
             timeout = httpx.Timeout(10.0, read=None)
-            async with httpx.AsyncClient(verify=False,timeout=timeout) as client:  # verify=False for development purposes
-                query_url = function_url + '?query=' + query + ':::' + client_id
-                async with client.stream('GET', query_url) as response:
+            async with httpx.AsyncClient(
+                verify=False, timeout=timeout
+            ) as client:  # verify=False for development purposes
+                query_url = function_url + "?query=" + query + ":::" + client_id
+                async with client.stream("GET", query_url) as response:
                     async for chunk in response.aiter_text():
-                        deltaText = ''
+                        deltaText = ""
                         deltaText = chunk
                         completionChunk1 = {
                             "id": "",
                             "model": "",
                             "created": 0,
                             "object": "",
-                            "choices": [{
-                                "messages": [],
-                                "delta": {}
-                            }],
+                            "choices": [{"messages": [], "delta": {}}],
                             "apim-request-id": "",
-                            'history_metadata': history_metadata
+                            "history_metadata": history_metadata,
                         }
 
                         completionChunk1["id"] = str(uuid.uuid4())
                         completionChunk1["model"] = AZURE_OPENAI_MODEL_NAME
                         completionChunk1["created"] = int(time.time())
                         completionChunk1["object"] = "extensions.chat.completion.chunk"
-                        completionChunk1["apim-request-id"] = request_headers.get("apim-request-id")
-                        completionChunk1["choices"][0]["messages"].append({
-                            "role": "assistant",
-                            "content": deltaText
-                        })
+                        completionChunk1["apim-request-id"] = request_headers.get(
+                            "apim-request-id"
+                        )
+                        completionChunk1["choices"][0]["messages"].append(
+                            {"role": "assistant", "content": deltaText}
+                        )
                         completionChunk1["choices"][0]["delta"] = {
                             "role": "assistant",
-                            "content": deltaText
+                            "content": deltaText,
                         }
-                        completionChunk2 = json.loads(json.dumps(completionChunk1), object_hook=lambda d: SimpleNamespace(**d))
-                        yield format_stream_response(completionChunk2, history_metadata, apim_request_id)
+                        completionChunk2 = json.loads(
+                            json.dumps(completionChunk1),
+                            object_hook=lambda d: SimpleNamespace(**d),
+                        )
+                        yield format_stream_response(
+                            completionChunk2, history_metadata, apim_request_id
+                        )
 
         return generate()
-    
+
     else:
-        response, apim_request_id = await send_chat_request(request_body, request_headers)
+        response, apim_request_id = await send_chat_request(
+            request_body, request_headers
+        )
         history_metadata = request_body.get("history_metadata", {})
-        
+
         async def generate():
             async for completionChunk in response:
-                yield format_stream_response(completionChunk, history_metadata, apim_request_id)
+                yield format_stream_response(
+                    completionChunk, history_metadata, apim_request_id
+                )
 
         return generate()
- 
 
 
 async def conversation_internal(request_body, request_headers):
@@ -1060,15 +1074,15 @@ def get_frontend_settings():
     except Exception as e:
         logging.exception("Exception in /frontend_settings")
         return jsonify({"error": str(e)}), 500
-    
 
-## Conversation History API ##
+
+# Conversation History API #
 @bp.route("/history/generate", methods=["POST"])
 async def add_conversation():
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## check request for conversation_id
+    # check request for conversation_id
     request_json = await request.get_json()
     conversation_id = request_json.get("conversation_id", None)
 
@@ -1089,8 +1103,8 @@ async def add_conversation():
             history_metadata["title"] = title
             history_metadata["date"] = conversation_dict["createdAt"]
 
-        ## Format the incoming message object in the "chat/completions" messages format
-        ## then write it to the conversation history in cosmos
+        # Format the incoming message object in the "chat/completions" messages format
+        # then write it to the conversation history in cosmos
         messages = request_json["messages"]
         if len(messages) > 0 and messages[-1]["role"] == "user":
             createdMessageValue = await cosmos_conversation_client.create_message(
@@ -1126,7 +1140,7 @@ async def update_conversation():
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## check request for conversation_id
+    # check request for conversation_id
     request_json = await request.get_json()
     conversation_id = request_json.get("conversation_id", None)
 
@@ -1140,8 +1154,8 @@ async def update_conversation():
         if not conversation_id:
             raise Exception("No conversation_id found")
 
-        ## Format the incoming message object in the "chat/completions" messages format
-        ## then write it to the conversation history in cosmos
+        # Format the incoming message object in the "chat/completions" messages format
+        # then write it to the conversation history in cosmos
         messages = request_json["messages"]
         if len(messages) > 0 and messages[-1]["role"] == "assistant":
             if len(messages) > 1 and messages[-2].get("role", None) == "tool":
@@ -1178,7 +1192,7 @@ async def update_message():
     user_id = authenticated_user["user_principal_id"]
     cosmos_conversation_client = init_cosmosdb_client()
 
-    ## check request for message_id
+    # check request for message_id
     request_json = await request.get_json()
     message_id = request_json.get("message_id", None)
     message_feedback = request_json.get("message_feedback", None)
@@ -1189,7 +1203,7 @@ async def update_message():
         if not message_feedback:
             return jsonify({"error": "message_feedback is required"}), 400
 
-        ## update the message in cosmos
+        # update the message in cosmos
         updated_message = await cosmos_conversation_client.update_message_feedback(
             user_id, message_id, message_feedback
         )
@@ -1220,11 +1234,11 @@ async def update_message():
 
 @bp.route("/history/delete", methods=["DELETE"])
 async def delete_conversation():
-    ## get the user id from the request headers
+    # get the user id from the request headers
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## check request for conversation_id
+    # check request for conversation_id
     request_json = await request.get_json()
     conversation_id = request_json.get("conversation_id", None)
 
@@ -1232,20 +1246,16 @@ async def delete_conversation():
         if not conversation_id:
             return jsonify({"error": "conversation_id is required"}), 400
 
-        ## make sure cosmos is configured
+        # make sure cosmos is configured
         cosmos_conversation_client = init_cosmosdb_client()
         if not cosmos_conversation_client:
             raise Exception("CosmosDB is not configured or not working")
 
-        ## delete the conversation messages from cosmos first
-        deleted_messages = await cosmos_conversation_client.delete_messages(
-            conversation_id, user_id
-        )
+        # delete the conversation messages from cosmos first
+        await cosmos_conversation_client.delete_messages(conversation_id, user_id)
 
-        ## Now delete the conversation
-        deleted_conversation = await cosmos_conversation_client.delete_conversation(
-            user_id, conversation_id
-        )
+        # Now delete the conversation
+        await cosmos_conversation_client.delete_conversation(user_id, conversation_id)
 
         await cosmos_conversation_client.cosmosdb_client.close()
 
@@ -1269,12 +1279,12 @@ async def list_conversations():
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## make sure cosmos is configured
+    # make sure cosmos is configured
     cosmos_conversation_client = init_cosmosdb_client()
     if not cosmos_conversation_client:
         raise Exception("CosmosDB is not configured or not working")
 
-    ## get the conversations from cosmos
+    # get the conversations from cosmos
     conversations = await cosmos_conversation_client.get_conversations(
         user_id, offset=offset, limit=25
     )
@@ -1282,7 +1292,7 @@ async def list_conversations():
     if not isinstance(conversations, list):
         return jsonify({"error": f"No conversations for {user_id} were found"}), 404
 
-    ## return the conversation ids
+    # return the conversation ids
 
     return jsonify(conversations), 200
 
@@ -1292,23 +1302,23 @@ async def get_conversation():
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## check request for conversation_id
+    # check request for conversation_id
     request_json = await request.get_json()
     conversation_id = request_json.get("conversation_id", None)
 
     if not conversation_id:
         return jsonify({"error": "conversation_id is required"}), 400
 
-    ## make sure cosmos is configured
+    # make sure cosmos is configured
     cosmos_conversation_client = init_cosmosdb_client()
     if not cosmos_conversation_client:
         raise Exception("CosmosDB is not configured or not working")
 
-    ## get the conversation object and the related messages from cosmos
+    # get the conversation object and the related messages from cosmos
     conversation = await cosmos_conversation_client.get_conversation(
         user_id, conversation_id
     )
-    ## return the conversation id and the messages in the bot frontend format
+    # return the conversation id and the messages in the bot frontend format
     if not conversation:
         return (
             jsonify(
@@ -1324,7 +1334,7 @@ async def get_conversation():
         user_id, conversation_id
     )
 
-    ## format the messages in the bot frontend format
+    # format the messages in the bot frontend format
     messages = [
         {
             "id": msg["id"],
@@ -1345,19 +1355,19 @@ async def rename_conversation():
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## check request for conversation_id
+    # check request for conversation_id
     request_json = await request.get_json()
     conversation_id = request_json.get("conversation_id", None)
 
     if not conversation_id:
         return jsonify({"error": "conversation_id is required"}), 400
 
-    ## make sure cosmos is configured
+    # make sure cosmos is configured
     cosmos_conversation_client = init_cosmosdb_client()
     if not cosmos_conversation_client:
         raise Exception("CosmosDB is not configured or not working")
 
-    ## get the conversation from cosmos
+    # get the conversation from cosmos
     conversation = await cosmos_conversation_client.get_conversation(
         user_id, conversation_id
     )
@@ -1371,7 +1381,7 @@ async def rename_conversation():
             404,
         )
 
-    ## update the title
+    # update the title
     title = request_json.get("title", None)
     if not title:
         return jsonify({"error": "title is required"}), 400
@@ -1386,13 +1396,13 @@ async def rename_conversation():
 
 @bp.route("/history/delete_all", methods=["DELETE"])
 async def delete_all_conversations():
-    ## get the user id from the request headers
+    # get the user id from the request headers
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
     # get conversations for user
     try:
-        ## make sure cosmos is configured
+        # make sure cosmos is configured
         cosmos_conversation_client = init_cosmosdb_client()
         if not cosmos_conversation_client:
             raise Exception("CosmosDB is not configured or not working")
@@ -1405,13 +1415,13 @@ async def delete_all_conversations():
 
         # delete each conversation
         for conversation in conversations:
-            ## delete the conversation messages from cosmos first
-            deleted_messages = await cosmos_conversation_client.delete_messages(
+            # delete the conversation messages from cosmos first
+            await cosmos_conversation_client.delete_messages(
                 conversation["id"], user_id
             )
 
-            ## Now delete the conversation
-            deleted_conversation = await cosmos_conversation_client.delete_conversation(
+            # Now delete the conversation
+            await cosmos_conversation_client.delete_conversation(
                 user_id, conversation["id"]
             )
         await cosmos_conversation_client.cosmosdb_client.close()
@@ -1431,11 +1441,11 @@ async def delete_all_conversations():
 
 @bp.route("/history/clear", methods=["POST"])
 async def clear_messages():
-    ## get the user id from the request headers
+    # get the user id from the request headers
     authenticated_user = get_authenticated_user_details(request_headers=request.headers)
     user_id = authenticated_user["user_principal_id"]
 
-    ## check request for conversation_id
+    # check request for conversation_id
     request_json = await request.get_json()
     conversation_id = request_json.get("conversation_id", None)
 
@@ -1443,15 +1453,13 @@ async def clear_messages():
         if not conversation_id:
             return jsonify({"error": "conversation_id is required"}), 400
 
-        ## make sure cosmos is configured
+        # make sure cosmos is configured
         cosmos_conversation_client = init_cosmosdb_client()
         if not cosmos_conversation_client:
             raise Exception("CosmosDB is not configured or not working")
 
-        ## delete the conversation messages from cosmos
-        deleted_messages = await cosmos_conversation_client.delete_messages(
-            conversation_id, user_id
-        )
+        # delete the conversation messages from cosmos
+        await cosmos_conversation_client.delete_messages(conversation_id, user_id)
 
         return (
             jsonify(
@@ -1510,7 +1518,7 @@ async def ensure_cosmos():
 
 
 async def generate_title(conversation_messages):
-    ## make sure the messages are sorted by _ts descending
+    # make sure the messages are sorted by _ts descending
     title_prompt = 'Summarize the conversation so far into a 4-word or less title. Do not use any quotation marks or punctuation. Respond with a json object in the format {{"title": string}}. Do not include any other commentary or description.'
 
     messages = [
@@ -1527,34 +1535,36 @@ async def generate_title(conversation_messages):
 
         title = json.loads(response.choices[0].message.content)["title"]
         return title
-    except Exception as e:
+    except Exception:
         return messages[-2]["content"]
-    
-@bp.route("/api/pbi", methods=['GET'])
+
+
+@bp.route("/api/pbi", methods=["GET"])
 def get_pbiurl():
     return VITE_POWERBI_EMBED_URL
-    
-@bp.route("/api/users", methods=['GET'])
+
+
+@bp.route("/api/users", methods=["GET"])
 def get_users():
-    conn = None 
+    conn = None
     try:
         conn = get_connection()
         cursor = conn.cursor()
         sql_stmt = """
-        SELECT 
-            ClientId, 
-            Client, 
-            Email, 
+        SELECT
+            ClientId,
+            Client,
+            Email,
             FORMAT(AssetValue, 'N0') AS AssetValue,
             ClientSummary,
             CAST(LastMeeting AS DATE) AS LastMeetingDate,
             FORMAT(CAST(LastMeeting AS DATE), 'dddd MMMM d, yyyy') AS LastMeetingDateFormatted,
-      FORMAT(LastMeeting, 'hh:mm tt') AS LastMeetingStartTime,
-            FORMAT(LastMeetingEnd, 'hh:mm tt') AS LastMeetingEndTime,
+            FORMAT(LastMeeting, 'HH:mm ') AS LastMeetingStartTime,
+            FORMAT(LastMeetingEnd, 'HH:mm') AS LastMeetingEndTime,
             CAST(NextMeeting AS DATE) AS NextMeetingDate,
             FORMAT(CAST(NextMeeting AS DATE), 'dddd MMMM d, yyyy') AS NextMeetingFormatted,
-            FORMAT(NextMeeting, 'hh:mm tt') AS NextMeetingStartTime,
-            FORMAT(NextMeetingEnd, 'hh:mm tt') AS NextMeetingEndTime
+            FORMAT(NextMeeting, 'HH:mm') AS NextMeetingStartTime,
+            FORMAT(NextMeetingEnd, 'HH:mm') AS NextMeetingEndTime
         FROM (
             SELECT ca.ClientId, Client, Email, AssetValue, ClientSummary, LastMeeting, LastMeetingEnd, NextMeeting, NextMeetingEnd
             FROM (
@@ -1573,7 +1583,7 @@ def get_users():
                 JOIN ClientSummaries cs ON c.ClientId = cs.ClientId
             ) ca
             JOIN (
-                SELECT cm.ClientId, 
+                SELECT cm.ClientId,
                     MAX(CASE WHEN StartTime < GETDATE() THEN StartTime END) AS LastMeeting,
                     DATEADD(MINUTE, 30, MAX(CASE WHEN StartTime < GETDATE() THEN StartTime END)) AS LastMeetingEnd,
                     MIN(CASE WHEN StartTime > GETDATE() AND StartTime < GETDATE() + 7 THEN StartTime END) AS NextMeeting,
@@ -1588,23 +1598,28 @@ def get_users():
         cursor.execute(sql_stmt)
         rows = cursor.fetchall()
 
+
         if len(rows) <= 6:
-            #update ClientMeetings,Assets,Retirement tables sample data to current date
+            # update ClientMeetings,Assets,Retirement tables sample data to current date
             cursor = conn.cursor()
-            cursor.execute("""select DATEDIFF(d,CAST(max(StartTime) AS Date),CAST(GETDATE() AS Date)) + 3 as ndays from ClientMeetings""")
+            cursor.execute(
+                """select DATEDIFF(d,CAST(max(StartTime) AS Date),CAST(GETDATE() AS Date)) + 3 as ndays from ClientMeetings"""
+            )
             rows = cursor.fetchall()
             for row in rows:
-                ndays = row['ndays']
-            sql_stmt1 = f'UPDATE ClientMeetings SET StartTime = dateadd(day,{ndays},StartTime), EndTime = dateadd(day,{ndays},EndTime)'
+                ndays = row["ndays"]
+            sql_stmt1 = f"UPDATE ClientMeetings SET StartTime = dateadd(day,{ndays},StartTime), EndTime = dateadd(day,{ndays},EndTime)"
             cursor.execute(sql_stmt1)
             conn.commit()
-            nmonths = int(ndays/30)
+            nmonths = int(ndays / 30)
             if nmonths > 0:
-                sql_stmt1 = f'UPDATE Assets SET AssetDate = dateadd(MONTH,{nmonths},AssetDate)'
+                sql_stmt1 = (
+                    f"UPDATE Assets SET AssetDate = dateadd(MONTH,{nmonths},AssetDate)"
+                )
                 cursor.execute(sql_stmt1)
                 conn.commit()
-            
-                sql_stmt1 = f'UPDATE Retirement SET StatusDate = dateadd(MONTH,{nmonths},StatusDate)'
+
+                sql_stmt1 = f"UPDATE Retirement SET StatusDate = dateadd(MONTH,{nmonths},StatusDate)"
                 cursor.execute(sql_stmt1)
                 conn.commit()
 
@@ -1616,29 +1631,29 @@ def get_users():
         for row in rows:
             # print(row)
             user = {
-                'ClientId': row['ClientId'],
-                'ClientName': row['Client'],
-                'ClientEmail': row['Email'],
-                'AssetValue': row['AssetValue'],
-                'NextMeeting': row['NextMeetingFormatted'],
-                'NextMeetingTime': row['NextMeetingStartTime'],
-                'NextMeetingEndTime': row['NextMeetingEndTime'],
-                'LastMeeting': row['LastMeetingDateFormatted'],
-                'LastMeetingStartTime': row['LastMeetingStartTime'],
-                'LastMeetingEndTime': row['LastMeetingEndTime'],
-                'ClientSummary': row['ClientSummary']
-                }
+                "ClientId": row["ClientId"],
+                "ClientName": row["Client"],
+                "ClientEmail": row["Email"],
+                "AssetValue": row["AssetValue"],
+                "NextMeeting": row["NextMeetingFormatted"],
+                "NextMeetingTime": row["NextMeetingStartTime"],
+                "NextMeetingEndTime": row["NextMeetingEndTime"],
+                "LastMeeting": row["LastMeetingDateFormatted"],
+                "LastMeetingStartTime": row["LastMeetingStartTime"],
+                "LastMeetingEndTime": row["LastMeetingEndTime"],
+                "ClientSummary": row["ClientSummary"],
+            }
             users.append(user)
             # print(users)
-       
+
         return jsonify(users)
-    
-        
+
     except Exception as e:
         print("Exception occurred:", e)
         return str(e), 500
     finally:
         if conn:
             conn.close()
-            
+
+
 app = create_app()
diff --git a/ClientAdvisor/App/backend/auth/auth_utils.py b/ClientAdvisor/App/backend/auth/auth_utils.py
index 3a97e610a..31e01dff7 100644
--- a/ClientAdvisor/App/backend/auth/auth_utils.py
+++ b/ClientAdvisor/App/backend/auth/auth_utils.py
@@ -2,38 +2,41 @@
 import json
 import logging
 
+
 def get_authenticated_user_details(request_headers):
     user_object = {}
 
-    ## check the headers for the Principal-Id (the guid of the signed in user)
+    # check the headers for the Principal-Id (the guid of the signed in user)
     if "X-Ms-Client-Principal-Id" not in request_headers.keys():
-        ## if it's not, assume we're in development mode and return a default user
+        # if it's not, assume we're in development mode and return a default user
         from . import sample_user
+
         raw_user_object = sample_user.sample_user
     else:
-        ## if it is, get the user details from the EasyAuth headers
-        raw_user_object = {k:v for k,v in request_headers.items()}
+        # if it is, get the user details from the EasyAuth headers
+        raw_user_object = {k: v for k, v in request_headers.items()}
 
-    user_object['user_principal_id'] = raw_user_object.get('X-Ms-Client-Principal-Id')
-    user_object['user_name'] = raw_user_object.get('X-Ms-Client-Principal-Name')
-    user_object['auth_provider'] = raw_user_object.get('X-Ms-Client-Principal-Idp')
-    user_object['auth_token'] = raw_user_object.get('X-Ms-Token-Aad-Id-Token')
-    user_object['client_principal_b64'] = raw_user_object.get('X-Ms-Client-Principal')
-    user_object['aad_id_token'] = raw_user_object.get('X-Ms-Token-Aad-Id-Token')
+    user_object["user_principal_id"] = raw_user_object.get("X-Ms-Client-Principal-Id")
+    user_object["user_name"] = raw_user_object.get("X-Ms-Client-Principal-Name")
+    user_object["auth_provider"] = raw_user_object.get("X-Ms-Client-Principal-Idp")
+    user_object["auth_token"] = raw_user_object.get("X-Ms-Token-Aad-Id-Token")
+    user_object["client_principal_b64"] = raw_user_object.get("X-Ms-Client-Principal")
+    user_object["aad_id_token"] = raw_user_object.get("X-Ms-Token-Aad-Id-Token")
 
     return user_object
 
+
 def get_tenantid(client_principal_b64):
-    tenant_id = ''
-    if client_principal_b64:   
+    tenant_id = ""
+    if client_principal_b64:
         try:
             # Decode the base64 header to get the JSON string
             decoded_bytes = base64.b64decode(client_principal_b64)
-            decoded_string = decoded_bytes.decode('utf-8')
+            decoded_string = decoded_bytes.decode("utf-8")
             # Convert the JSON string1into a Python dictionary
             user_info = json.loads(decoded_string)
             # Extract the tenant ID
-            tenant_id = user_info.get('tid')  # 'tid' typically holds the tenant ID
+            tenant_id = user_info.get("tid")  # 'tid' typically holds the tenant ID
         except Exception as ex:
             logging.exception(ex)
-    return tenant_id
\ No newline at end of file
+    return tenant_id
diff --git a/ClientAdvisor/App/backend/auth/sample_user.py b/ClientAdvisor/App/backend/auth/sample_user.py
index 0b10d9ab5..9353bcc1b 100644
--- a/ClientAdvisor/App/backend/auth/sample_user.py
+++ b/ClientAdvisor/App/backend/auth/sample_user.py
@@ -1,39 +1,39 @@
 sample_user = {
-  "Accept": "*/*",
-  "Accept-Encoding": "gzip, deflate, br",
-  "Accept-Language": "en",
-  "Client-Ip": "22.222.222.2222:64379",
-  "Content-Length": "192",
-  "Content-Type": "application/json",
-  "Cookie": "AppServiceAuthSession=/AuR5ENU+pmpoN3jnymP8fzpmVBgphx9uPQrYLEWGcxjIITIeh8NZW7r3ePkG8yBcMaItlh1pX4nzg5TFD9o2mxC/5BNDRe/uuu0iDlLEdKecROZcVRY7QsFdHLjn9KB90Z3d9ZeLwfVIf0sZowWJt03BO5zKGB7vZgL+ofv3QY3AaYn1k1GtxSE9HQWJpWar7mOA64b7Lsy62eY3nxwg3AWDsP3/rAta+MnDCzpdlZMFXcJLj+rsCppW+w9OqGhKQ7uCs03BPeon3qZOdmE8cOJW3+i96iYlhneNQDItHyQqEi1CHbBTSkqwpeOwWP4vcwGM22ynxPp7YFyiRw/X361DGYy+YkgYBkXq1AEIDZ44BCBz9EEaEi0NU+m6yUOpNjEaUtrJKhQywcM2odojdT4XAY+HfTEfSqp0WiAkgAuE/ueCu2JDOfvxGjCgJ4DGWCoYdOdXAN1c+MenT4OSvkMO41YuPeah9qk9ixkJI5s80lv8rUu1J26QF6pstdDkYkAJAEra3RQiiO1eAH7UEb3xHXn0HW5lX8ZDX3LWiAFGOt5DIKxBKFymBKJGzbPFPYjfczegu0FD8/NQPLl2exAX3mI9oy/tFnATSyLO2E8DxwP5wnYVminZOQMjB/I4g3Go14betm0MlNXlUbU1fyS6Q6JxoCNLDZywCoU9Y65UzimWZbseKsXlOwYukCEpuQ5QPT55LuEAWhtYier8LSh+fvVUsrkqKS+bg0hzuoX53X6aqUr7YB31t0Z2zt5TT/V3qXpdyD8Xyd884PqysSkJYa553sYx93ETDKSsfDguanVfn2si9nvDpvUWf6/R02FmQgXiaaaykMgYyIuEmE77ptsivjH3hj/MN4VlePFWokcchF4ciqqzonmICmjEHEx5zpjU2Kwa+0y7J5ROzVVygcnO1jH6ZKDy9bGGYL547bXx/iiYBYqSIQzleOAkCeULrGN2KEHwckX5MpuRaqTpoxdZH9RJv0mIWxbDA0kwGsbMICQd0ZODBkPUnE84qhzvXInC+TL7MbutPEnGbzgxBAS1c2Ct4vxkkjykOeOxTPxqAhxoefwUfIwZZax6A9LbeYX2bsBpay0lScHcA==",
-  "Disguised-Host": "your_app_service.azurewebsites.net",
-  "Host": "your_app_service.azurewebsites.net",
-  "Max-Forwards": "10",
-  "Origin": "https://your_app_service.azurewebsites.net",
-  "Referer": "https://your_app_service.azurewebsites.net/",
-  "Sec-Ch-Ua": "\"Microsoft Edge\";v=\"113\", \"Chromium\";v=\"113\", \"Not-A.Brand\";v=\"24\"",
-  "Sec-Ch-Ua-Mobile": "?0",
-  "Sec-Ch-Ua-Platform": "\"Windows\"",
-  "Sec-Fetch-Dest": "empty",
-  "Sec-Fetch-Mode": "cors",
-  "Sec-Fetch-Site": "same-origin",
-  "Traceparent": "00-24e9a8d1b06f233a3f1714845ef971a9-3fac69f81ca5175c-00",
-  "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.42",
-  "Was-Default-Hostname": "your_app_service.azurewebsites.net",
-  "X-Appservice-Proto": "https",
-  "X-Arr-Log-Id": "4102b832-6c88-4c7c-8996-0edad9e4358f",
-  "X-Arr-Ssl": "2048|256|CN=Microsoft Azure TLS Issuing CA 02, O=Microsoft Corporation, C=US|CN=*.azurewebsites.net, O=Microsoft Corporation, L=Redmond, S=WA, C=US",
-  "X-Client-Ip": "22.222.222.222",
-  "X-Client-Port": "64379",
-  "X-Forwarded-For": "22.222.222.22:64379",
-  "X-Forwarded-Proto": "https",
-  "X-Forwarded-Tlsversion": "1.2",
-  "X-Ms-Client-Principal": "your_base_64_encoded_token",
-  "X-Ms-Client-Principal-Id": "00000000-0000-0000-0000-000000000000",
-  "X-Ms-Client-Principal-Idp": "aad",
-  "X-Ms-Client-Principal-Name": "testusername@constoso.com",
-  "X-Ms-Token-Aad-Id-Token": "your_aad_id_token",
-  "X-Original-Url": "/chatgpt",
-  "X-Site-Deployment-Id": "your_app_service",
-  "X-Waws-Unencoded-Url": "/chatgpt"
+    "Accept": "*/*",
+    "Accept-Encoding": "gzip, deflate, br",
+    "Accept-Language": "en",
+    "Client-Ip": "22.222.222.2222:64379",
+    "Content-Length": "192",
+    "Content-Type": "application/json",
+    "Cookie": "AppServiceAuthSession=/AuR5ENU+pmpoN3jnymP8fzpmVBgphx9uPQrYLEWGcxjIITIeh8NZW7r3ePkG8yBcMaItlh1pX4nzg5TFD9o2mxC/5BNDRe/uuu0iDlLEdKecROZcVRY7QsFdHLjn9KB90Z3d9ZeLwfVIf0sZowWJt03BO5zKGB7vZgL+ofv3QY3AaYn1k1GtxSE9HQWJpWar7mOA64b7Lsy62eY3nxwg3AWDsP3/rAta+MnDCzpdlZMFXcJLj+rsCppW+w9OqGhKQ7uCs03BPeon3qZOdmE8cOJW3+i96iYlhneNQDItHyQqEi1CHbBTSkqwpeOwWP4vcwGM22ynxPp7YFyiRw/X361DGYy+YkgYBkXq1AEIDZ44BCBz9EEaEi0NU+m6yUOpNjEaUtrJKhQywcM2odojdT4XAY+HfTEfSqp0WiAkgAuE/ueCu2JDOfvxGjCgJ4DGWCoYdOdXAN1c+MenT4OSvkMO41YuPeah9qk9ixkJI5s80lv8rUu1J26QF6pstdDkYkAJAEra3RQiiO1eAH7UEb3xHXn0HW5lX8ZDX3LWiAFGOt5DIKxBKFymBKJGzbPFPYjfczegu0FD8/NQPLl2exAX3mI9oy/tFnATSyLO2E8DxwP5wnYVminZOQMjB/I4g3Go14betm0MlNXlUbU1fyS6Q6JxoCNLDZywCoU9Y65UzimWZbseKsXlOwYukCEpuQ5QPT55LuEAWhtYier8LSh+fvVUsrkqKS+bg0hzuoX53X6aqUr7YB31t0Z2zt5TT/V3qXpdyD8Xyd884PqysSkJYa553sYx93ETDKSsfDguanVfn2si9nvDpvUWf6/R02FmQgXiaaaykMgYyIuEmE77ptsivjH3hj/MN4VlePFWokcchF4ciqqzonmICmjEHEx5zpjU2Kwa+0y7J5ROzVVygcnO1jH6ZKDy9bGGYL547bXx/iiYBYqSIQzleOAkCeULrGN2KEHwckX5MpuRaqTpoxdZH9RJv0mIWxbDA0kwGsbMICQd0ZODBkPUnE84qhzvXInC+TL7MbutPEnGbzgxBAS1c2Ct4vxkkjykOeOxTPxqAhxoefwUfIwZZax6A9LbeYX2bsBpay0lScHcA==",
+    "Disguised-Host": "your_app_service.azurewebsites.net",
+    "Host": "your_app_service.azurewebsites.net",
+    "Max-Forwards": "10",
+    "Origin": "https://your_app_service.azurewebsites.net",
+    "Referer": "https://your_app_service.azurewebsites.net/",
+    "Sec-Ch-Ua": '"Microsoft Edge";v="113", "Chromium";v="113", "Not-A.Brand";v="24"',
+    "Sec-Ch-Ua-Mobile": "?0",
+    "Sec-Ch-Ua-Platform": '"Windows"',
+    "Sec-Fetch-Dest": "empty",
+    "Sec-Fetch-Mode": "cors",
+    "Sec-Fetch-Site": "same-origin",
+    "Traceparent": "00-24e9a8d1b06f233a3f1714845ef971a9-3fac69f81ca5175c-00",
+    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.42",
+    "Was-Default-Hostname": "your_app_service.azurewebsites.net",
+    "X-Appservice-Proto": "https",
+    "X-Arr-Log-Id": "4102b832-6c88-4c7c-8996-0edad9e4358f",
+    "X-Arr-Ssl": "2048|256|CN=Microsoft Azure TLS Issuing CA 02, O=Microsoft Corporation, C=US|CN=*.azurewebsites.net, O=Microsoft Corporation, L=Redmond, S=WA, C=US",
+    "X-Client-Ip": "22.222.222.222",
+    "X-Client-Port": "64379",
+    "X-Forwarded-For": "22.222.222.22:64379",
+    "X-Forwarded-Proto": "https",
+    "X-Forwarded-Tlsversion": "1.2",
+    "X-Ms-Client-Principal": "your_base_64_encoded_token",
+    "X-Ms-Client-Principal-Id": "00000000-0000-0000-0000-000000000000",
+    "X-Ms-Client-Principal-Idp": "aad",
+    "X-Ms-Client-Principal-Name": "testusername@constoso.com",
+    "X-Ms-Token-Aad-Id-Token": "your_aad_id_token",
+    "X-Original-Url": "/chatgpt",
+    "X-Site-Deployment-Id": "your_app_service",
+    "X-Waws-Unencoded-Url": "/chatgpt",
 }
diff --git a/ClientAdvisor/App/backend/history/cosmosdbservice.py b/ClientAdvisor/App/backend/history/cosmosdbservice.py
index 737c23d9a..e9fba5204 100644
--- a/ClientAdvisor/App/backend/history/cosmosdbservice.py
+++ b/ClientAdvisor/App/backend/history/cosmosdbservice.py
@@ -2,17 +2,27 @@
 from datetime import datetime
 from azure.cosmos.aio import CosmosClient
 from azure.cosmos import exceptions
-  
-class CosmosConversationClient():
-    
-    def __init__(self, cosmosdb_endpoint: str, credential: any, database_name: str, container_name: str, enable_message_feedback: bool = False):
+
+
+class CosmosConversationClient:
+
+    def __init__(
+        self,
+        cosmosdb_endpoint: str,
+        credential: any,
+        database_name: str,
+        container_name: str,
+        enable_message_feedback: bool = False,
+    ):
         self.cosmosdb_endpoint = cosmosdb_endpoint
         self.credential = credential
         self.database_name = database_name
         self.container_name = container_name
         self.enable_message_feedback = enable_message_feedback
         try:
-            self.cosmosdb_client = CosmosClient(self.cosmosdb_endpoint, credential=credential)
+            self.cosmosdb_client = CosmosClient(
+                self.cosmosdb_endpoint, credential=credential
+            )
         except exceptions.CosmosHttpResponseError as e:
             if e.status_code == 401:
                 raise ValueError("Invalid credentials") from e
@@ -20,48 +30,58 @@ def __init__(self, cosmosdb_endpoint: str, credential: any, database_name: str,
                 raise ValueError("Invalid CosmosDB endpoint") from e
 
         try:
-            self.database_client = self.cosmosdb_client.get_database_client(database_name)
+            self.database_client = self.cosmosdb_client.get_database_client(
+                database_name
+            )
         except exceptions.CosmosResourceNotFoundError:
-            raise ValueError("Invalid CosmosDB database name") 
-        
+            raise ValueError("Invalid CosmosDB database name")
+
         try:
-            self.container_client = self.database_client.get_container_client(container_name)
+            self.container_client = self.database_client.get_container_client(
+                container_name
+            )
         except exceptions.CosmosResourceNotFoundError:
-            raise ValueError("Invalid CosmosDB container name") 
-        
+            raise ValueError("Invalid CosmosDB container name")
 
     async def ensure(self):
-        if not self.cosmosdb_client or not self.database_client or not self.container_client:
+        if (
+            not self.cosmosdb_client
+            or not self.database_client
+            or not self.container_client
+        ):
             return False, "CosmosDB client not initialized correctly"
-            
+
         try:
-            database_info = await self.database_client.read()
-        except:
-            return False, f"CosmosDB database {self.database_name} on account {self.cosmosdb_endpoint} not found"
-        
+            await self.database_client.read()
+        except Exception:
+            return (
+                False,
+                f"CosmosDB database {self.database_name} on account {self.cosmosdb_endpoint} not found",
+            )
+
         try:
-            container_info = await self.container_client.read()
-        except:
+            await self.container_client.read()
+        except Exception:
             return False, f"CosmosDB container {self.container_name} not found"
-            
+
         return True, "CosmosDB client initialized successfully"
 
-    async def create_conversation(self, user_id, title = ''):
+    async def create_conversation(self, user_id, title=""):
         conversation = {
-            'id': str(uuid.uuid4()),  
-            'type': 'conversation',
-            'createdAt': datetime.utcnow().isoformat(),  
-            'updatedAt': datetime.utcnow().isoformat(),  
-            'userId': user_id,
-            'title': title
+            "id": str(uuid.uuid4()),
+            "type": "conversation",
+            "createdAt": datetime.utcnow().isoformat(),
+            "updatedAt": datetime.utcnow().isoformat(),
+            "userId": user_id,
+            "title": title,
         }
-        ## TODO: add some error handling based on the output of the upsert_item call
-        resp = await self.container_client.upsert_item(conversation)  
+        # TODO: add some error handling based on the output of the upsert_item call
+        resp = await self.container_client.upsert_item(conversation)
         if resp:
             return resp
         else:
             return False
-    
+
     async def upsert_conversation(self, conversation):
         resp = await self.container_client.upsert_item(conversation)
         if resp:
@@ -70,95 +90,94 @@ async def upsert_conversation(self, conversation):
             return False
 
     async def delete_conversation(self, user_id, conversation_id):
-        conversation = await self.container_client.read_item(item=conversation_id, partition_key=user_id)        
+        conversation = await self.container_client.read_item(
+            item=conversation_id, partition_key=user_id
+        )
         if conversation:
-            resp = await self.container_client.delete_item(item=conversation_id, partition_key=user_id)
+            resp = await self.container_client.delete_item(
+                item=conversation_id, partition_key=user_id
+            )
             return resp
         else:
             return True
 
-        
     async def delete_messages(self, conversation_id, user_id):
-        ## get a list of all the messages in the conversation
+        # get a list of all the messages in the conversation
         messages = await self.get_messages(user_id, conversation_id)
         response_list = []
         if messages:
             for message in messages:
-                resp = await self.container_client.delete_item(item=message['id'], partition_key=user_id)
+                resp = await self.container_client.delete_item(
+                    item=message["id"], partition_key=user_id
+                )
                 response_list.append(resp)
             return response_list
 
-
-    async def get_conversations(self, user_id, limit, sort_order = 'DESC', offset = 0):
-        parameters = [
-            {
-                'name': '@userId',
-                'value': user_id
-            }
-        ]
+    async def get_conversations(self, user_id, limit, sort_order="DESC", offset=0):
+        parameters = [{"name": "@userId", "value": user_id}]
         query = f"SELECT * FROM c where c.userId = @userId and c.type='conversation' order by c.updatedAt {sort_order}"
         if limit is not None:
-            query += f" offset {offset} limit {limit}" 
-        
+            query += f" offset {offset} limit {limit}"
+
         conversations = []
-        async for item in self.container_client.query_items(query=query, parameters=parameters):
+        async for item in self.container_client.query_items(
+            query=query, parameters=parameters
+        ):
             conversations.append(item)
-        
+
         return conversations
 
     async def get_conversation(self, user_id, conversation_id):
         parameters = [
-            {
-                'name': '@conversationId',
-                'value': conversation_id
-            },
-            {
-                'name': '@userId',
-                'value': user_id
-            }
+            {"name": "@conversationId", "value": conversation_id},
+            {"name": "@userId", "value": user_id},
         ]
-        query = f"SELECT * FROM c where c.id = @conversationId and c.type='conversation' and c.userId = @userId"
+        query = "SELECT * FROM c where c.id = @conversationId and c.type='conversation' and c.userId = @userId"
         conversations = []
-        async for item in self.container_client.query_items(query=query, parameters=parameters):
+        async for item in self.container_client.query_items(
+            query=query, parameters=parameters
+        ):
             conversations.append(item)
 
-        ## if no conversations are found, return None
+        # if no conversations are found, return None
         if len(conversations) == 0:
             return None
         else:
             return conversations[0]
- 
+
     async def create_message(self, uuid, conversation_id, user_id, input_message: dict):
         message = {
-            'id': uuid,
-            'type': 'message',
-            'userId' : user_id,
-            'createdAt': datetime.utcnow().isoformat(),
-            'updatedAt': datetime.utcnow().isoformat(),
-            'conversationId' : conversation_id,
-            'role': input_message['role'],
-            'content': input_message['content']
+            "id": uuid,
+            "type": "message",
+            "userId": user_id,
+            "createdAt": datetime.utcnow().isoformat(),
+            "updatedAt": datetime.utcnow().isoformat(),
+            "conversationId": conversation_id,
+            "role": input_message["role"],
+            "content": input_message["content"],
         }
 
         if self.enable_message_feedback:
-            message['feedback'] = ''
-        
-        resp = await self.container_client.upsert_item(message)  
+            message["feedback"] = ""
+
+        resp = await self.container_client.upsert_item(message)
         if resp:
-            ## update the parent conversations's updatedAt field with the current message's createdAt datetime value
+            # update the parent conversations's updatedAt field with the current message's createdAt datetime value
             conversation = await self.get_conversation(user_id, conversation_id)
             if not conversation:
                 return "Conversation not found"
-            conversation['updatedAt'] = message['createdAt']
+            conversation["updatedAt"] = message["createdAt"]
             await self.upsert_conversation(conversation)
             return resp
         else:
             return False
-    
+
     async def update_message_feedback(self, user_id, message_id, feedback):
-        message = await self.container_client.read_item(item=message_id, partition_key=user_id)
+        message = await self.container_client.read_item(
+            item=message_id, partition_key=user_id
+        )
         if message:
-            message['feedback'] = feedback
+            message["feedback"] = feedback
             resp = await self.container_client.upsert_item(message)
             return resp
         else:
@@ -166,19 +185,14 @@ async def update_message_feedback(self, user_id, message_id, feedback):
 
     async def get_messages(self, user_id, conversation_id):
         parameters = [
-            {
-                'name': '@conversationId',
-                'value': conversation_id
-            },
-            {
-                'name': '@userId',
-                'value': user_id
-            }
+            {"name": "@conversationId", "value": conversation_id},
+            {"name": "@userId", "value": user_id},
         ]
-        query = f"SELECT * FROM c WHERE c.conversationId = @conversationId AND c.type='message' AND c.userId = @userId ORDER BY c.timestamp ASC"
+        query = "SELECT * FROM c WHERE c.conversationId = @conversationId AND c.type='message' AND c.userId = @userId ORDER BY c.timestamp ASC"
         messages = []
-        async for item in self.container_client.query_items(query=query, parameters=parameters):
+        async for item in self.container_client.query_items(
+            query=query, parameters=parameters
+        ):
             messages.append(item)
 
         return messages
-
diff --git a/ClientAdvisor/App/backend/utils.py b/ClientAdvisor/App/backend/utils.py
index 5c53bd001..ca7f325b0 100644
--- a/ClientAdvisor/App/backend/utils.py
+++ b/ClientAdvisor/App/backend/utils.py
@@ -104,6 +104,7 @@ def format_non_streaming_response(chatCompletion, history_metadata, apim_request
 
     return {}
 
+
 def format_stream_response(chatCompletionChunk, history_metadata, apim_request_id):
     response_obj = {
         "id": chatCompletionChunk.id,
@@ -142,7 +143,11 @@ def format_stream_response(chatCompletionChunk, history_metadata, apim_request_i
 
 
 def format_pf_non_streaming_response(
-    chatCompletion, history_metadata, response_field_name, citations_field_name, message_uuid=None
+    chatCompletion,
+    history_metadata,
+    response_field_name,
+    citations_field_name,
+    message_uuid=None,
 ):
     if chatCompletion is None:
         logging.error(
@@ -159,15 +164,13 @@ def format_pf_non_streaming_response(
     try:
         messages = []
         if response_field_name in chatCompletion:
-            messages.append({
-                "role": "assistant",
-                "content": chatCompletion[response_field_name] 
-            })
+            messages.append(
+                {"role": "assistant", "content": chatCompletion[response_field_name]}
+            )
         if citations_field_name in chatCompletion:
-            messages.append({ 
-                "role": "tool",
-                "content": chatCompletion[citations_field_name]
-            })
+            messages.append(
+                {"role": "tool", "content": chatCompletion[citations_field_name]}
+            )
         response_obj = {
             "id": chatCompletion["id"],
             "model": "",
@@ -178,7 +181,7 @@ def format_pf_non_streaming_response(
                     "messages": messages,
                     "history_metadata": history_metadata,
                 }
-            ]
+            ],
         }
         return response_obj
     except Exception as e:
diff --git a/ClientAdvisor/App/db.py b/ClientAdvisor/App/db.py
index 03de12ffa..ab7dc375e 100644
--- a/ClientAdvisor/App/db.py
+++ b/ClientAdvisor/App/db.py
@@ -5,19 +5,15 @@
 
 load_dotenv()
 
-server = os.environ.get('SQLDB_SERVER')
-database = os.environ.get('SQLDB_DATABASE')
-username = os.environ.get('SQLDB_USERNAME')
-password = os.environ.get('SQLDB_PASSWORD')
+server = os.environ.get("SQLDB_SERVER")
+database = os.environ.get("SQLDB_DATABASE")
+username = os.environ.get("SQLDB_USERNAME")
+password = os.environ.get("SQLDB_PASSWORD")
+
 
 def get_connection():
 
     conn = pymssql.connect(
-        server=server,
-        user=username,
-        password=password,
-        database=database,
-        as_dict=True
-    )  
+        server=server, user=username, password=password, database=database, as_dict=True
+    )
     return conn
- 
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/__mocks__/dompurify.ts b/ClientAdvisor/App/frontend/__mocks__/dompurify.ts
new file mode 100644
index 000000000..02ccb1e8c
--- /dev/null
+++ b/ClientAdvisor/App/frontend/__mocks__/dompurify.ts
@@ -0,0 +1,5 @@
+const DOMPurify = {
+  sanitize: jest.fn((input: string) => input), // Mock implementation that returns the input
+};
+
+export default DOMPurify; // Use default export
diff --git a/ClientAdvisor/App/frontend/__mocks__/fileMock.ts b/ClientAdvisor/App/frontend/__mocks__/fileMock.ts
new file mode 100644
index 000000000..398045fc4
--- /dev/null
+++ b/ClientAdvisor/App/frontend/__mocks__/fileMock.ts
@@ -0,0 +1,4 @@
+// __mocks__/fileMock.ts
+const fileMock = 'test-file-stub';
+
+export default fileMock;
diff --git a/ClientAdvisor/App/frontend/__mocks__/mockAPIData.ts b/ClientAdvisor/App/frontend/__mocks__/mockAPIData.ts
new file mode 100644
index 000000000..721a9c922
--- /dev/null
+++ b/ClientAdvisor/App/frontend/__mocks__/mockAPIData.ts
@@ -0,0 +1,164 @@
+export const conversationResponseWithCitations = {
+    answer: {
+      answer:
+        "Microsoft AI encompasses a wide range of technologies and solutions that leverage artificial intelligence to empower individuals and organizations. Microsoft's AI platform, Azure AI, helps organizations transform by bringing intelligence and insights to solve their most pressing challenges[doc2]. Azure AI offers enterprise-level and responsible AI protections, enabling organizations to achieve more at scale[doc8]. Microsoft has a long-term partnership with OpenAI and deploys OpenAI's models across its consumer and enterprise products[doc5]. The company is committed to making the promise of AI real and doing it responsibly, guided by principles such as fairness, reliability and safety, privacy and security, inclusiveness, transparency, and accountability[doc1]. Microsoft's AI offerings span various domains, including productivity services, cloud computing, mixed reality, conversational AI, data analytics, and more[doc3][doc6][doc4]. These AI solutions aim to enhance productivity, improve customer experiences, optimize business functions, and drive innovation[doc9][doc7]. However, the adoption of AI also presents challenges and risks, such as biased datasets, ethical considerations, and potential legal and reputational harm[doc11]. Microsoft is committed to addressing these challenges and ensuring the responsible development and deployment of AI technologies[doc10].",
+      citations: [
+        {
+          content: "someContent",
+          id: "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6",
+          chunk_id: 7,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6",
+          chunk_id: 7,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+  
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6",
+          chunk_id: 7,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_14b4ad620c24c5a472f0c4505019c5370b814e17",
+          chunk_id: 4,
+          title:
+            "/documents/MSFT_FY23Q4_10K_DOCUMENT_FOLDER_SRC_IMPORTANT_CHUNKS_LIST_VALID_CHUNKS_ACCESS_TO_MSFT_WINDOWS_BLOBS_CORE_WINDOWS.docx",
+          filepath:
+            "MSFT_FY23Q4_10K_DOCUMENT_FOLDER_SRC_IMPORTANT_CHUNKS_LIST_VALID_CHUNKS_ACCESS_TO_MSFT_WINDOWS_BLOBS_CORE_WINDOWS.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6",
+          chunk_id: 7,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_d85da45581d92f2ff59e261197d2c70c2b6f8802",
+          chunk_id: 8,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_3a2261beeaf7820dfdcc3b0d51a58bd981555b92",
+          chunk_id: 6,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: null,
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6",
+          chunk_id: 7,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_3a2261beeaf7820dfdcc3b0d51a58bd981555b92",
+          chunk_id: 6,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: null,
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_0b803fe4ec1406115ee7f35a9dd9060ad5d905f5",
+          chunk_id: 57,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+        {
+          content: "someContent",
+          id: "doc_0b803fe4ec1406115ee7f35a9dd9060ad5d905f5",
+          chunk_id: 57,
+          title: "/documents/MSFT_FY23Q4_10K.docx",
+          filepath: "MSFT_FY23Q4_10K.docx",
+          url: "document url",
+          metadata: null,
+        },
+      ],
+    },
+    isActive: false,
+    index: 2,
+  };
+  
+  export const decodedConversationResponseWithCitations = {
+    choices: [
+      {
+        messages: [
+          {
+            content:
+              '{"citations": [{"content": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)\\n\\n\\n<p>Our AI platform, Azure AI, is helping organizations transform, bringing intelligence and insights to the hands of their employees and customers to solve their most pressing challenges. Organizations large and small are deploying Azure AI solutions to achieve more at scale, more easily, with the proper enterprise-level and responsible AI protections.</p>\\n<p>We have a long-term partnership with OpenAI, a leading AI research and deployment company. We deploy OpenAI\\u2019s models across our consumer and enterprise products. As OpenAI\\u2019s exclusive cloud provider, Azure powers all of OpenAI\'s workloads. We have also increased our investments in the development and deployment of specialized supercomputing systems to accelerate OpenAI\\u2019s research.</p>\\n<p>Our hybrid infrastructure offers integrated, end-to-end security, compliance, identity, and management capabilities to support the real-world needs and evolving regulatory requirements of commercial customers and enterprises. Our industry clouds bring together capabilities across the entire Microsoft Cloud, along with industry-specific customizations. Azure Arc simplifies governance and management by delivering a consistent multi-cloud and on-premises management platform.</p>\\n<p>Nuance, a leader in conversational AI and ambient intelligence across industries including healthcare, financial services, retail, and telecommunications, joined Microsoft in 2022. Microsoft and Nuance enable organizations to accelerate their business goals with security-focused, cloud-based solutions infused with AI.</p>\\n<p>We are accelerating our development of mixed reality solutions with new Azure services and devices. Microsoft Mesh enables organizations to create custom, immersive experiences for the workplace to help bring remote and hybrid workers and teams together. </p>\\n<p>The ability to convert data into AI drives our competitive advantage. The Microsoft Intelligent Data Platform is a leading cloud data platform that fully integrates databases, analytics, and governance. The platform empowers organizations to invest more time creating value rather than integrating and managing their data. Microsoft Fabric is an end-to-end, unified analytics platform that brings together all the data and analytics tools that organizations need. </p>", "id": "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6", "chunk_id": 7, "title": "/documents/MSFT_FY23Q4_10K.docx", "filepath": "MSFT_FY23Q4_10K.docx", "url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "metadata": {"offset": 13285, "source": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "markdown_url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "title": "/documents/MSFT_FY23Q4_10K.docx", "original_url": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "chunk": 7, "key": "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6", "filename": "MSFT_FY23Q4_10K"}}, {"content": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)\\n\\n\\n<p>Azure AI offerings provide a competitive advantage as companies seek ways to optimize and scale their business with machine learning. Azure\\u2019s purpose-built, AI-optimized infrastructure allows advanced models, including GPT-4 services designed for developers and data scientists, to do more with less. Customers can integrate large language models and develop the next generation of AI apps and services.</p>\\n<p>Our server products are designed to make IT professionals, developers, and their systems more productive and efficient. Server software is integrated server infrastructure and middleware designed to support software applications built on the Windows Server operating system. This includes the server platform, database, business intelligence, storage, management and operations, virtualization, service-oriented architecture platform, security, and identity software. We also license standalone and software development lifecycle tools for software architects, developers, testers, and project managers. Server products revenue is mainly affected by purchases through volume licensing programs, licenses sold to original equipment manufacturers (\\u201cOEM\\u201d), and retail packaged products. CALs provide access rights to certain server products, including SQL Server and Windows Server, and revenue is reported along with the associated server product.</p>\\n<p>Nuance and GitHub include both cloud and on-premises offerings. Nuance provides healthcare and enterprise AI solutions. GitHub provides a collaboration platform and code hosting service for developers. </p>\\n<p>Enterprise Services</p>\\n<p>Enterprise Services, including Enterprise Support Services, Industry Solutions, and Nuance Professional Services, assist customers in developing, deploying, and managing Microsoft server solutions, Microsoft desktop solutions, and Nuance conversational AI and ambient intelligent solutions, along with providing training and certification to developers and IT professionals on various Microsoft products.</p>\\n<p>Competition</p>", "id": "doc_d955ec06f352569e20f51f8e25c1b13c4b1c0cea", "chunk_id": 23, "title": "/documents/MSFT_FY23Q4_10K.docx", "filepath": "MSFT_FY23Q4_10K.docx", "url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "metadata": {"offset": 48420, "source": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "markdown_url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "title": "/documents/MSFT_FY23Q4_10K.docx", "original_url": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "chunk": 23, "key": "doc_d955ec06f352569e20f51f8e25c1b13c4b1c0cea", "filename": "MSFT_FY23Q4_10K"}}, {"content": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)\\n\\n\\n<p>PART I</p>\\n<p>ITEM\\u00a01. BUSINESS</p>\\n<p>GENERAL</p>\\n<p>Embracing Our Future</p>\\n<p>Microsoft is a technology company whose mission is to empower every person and every organization on the planet to achieve more. We strive to create local opportunity, growth, and impact in every country around the world. We are creating the platforms and tools, powered by artificial intelligence (\\u201cAI\\u201d), that deliver better, faster, and more effective solutions to support small and large business competitiveness, improve educational and health outcomes, grow public-sector efficiency, and empower human ingenuity. From infrastructure and data, to business applications and collaboration, we provide unique, differentiated value to customers. </p>\\n<p>In a world of increasing economic complexity, AI has the power to revolutionize many types of work. Microsoft is now innovating and expanding our portfolio with AI capabilities to help people and organizations overcome today\\u2019s challenges and emerge stronger. Customers are looking to unlock value from their digital spend and innovate for this next generation of AI, while simplifying security and management. Those leveraging the Microsoft Cloud are best positioned to take advantage of technological advancements and drive innovation. Our investment in AI spans the entire company, from Microsoft Teams and Outlook, to Bing and Xbox, and we are infusing generative AI capability into our consumer and commercial offerings to deliver copilot capability for all services across the Microsoft Cloud. </p>\\n<p>We\\u2019re committed to making the promise of AI real \\u2013 and doing it responsibly. Our work is guided by a core set of principles: fairness, reliability and safety, privacy and security, inclusiveness, transparency, and accountability. </p>\\n<p>What We Offer</p>\\n<p>Founded in 1975, we develop and support software, services, devices, and solutions that deliver new value for customers and help people and businesses realize their full potential.</p>\\n<p>We offer an array of services, including cloud-based solutions that provide customers with software, services, platforms, and content, and we provide solution support and consulting services. We also deliver relevant online advertising to a global audience.</p>", "id": "doc_14b4ad620c24c5a472f0c4505019c5370b814e17", "chunk_id": 4, "title": "/documents/MSFT_FY23Q4_10K.docx", "filepath": "MSFT_FY23Q4_10K.docx", "url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "metadata": {"offset": 6098, "source": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "markdown_url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "title": "/documents/MSFT_FY23Q4_10K.docx", "original_url": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "chunk": 4, "key": "doc_14b4ad620c24c5a472f0c4505019c5370b814e17", "filename": "MSFT_FY23Q4_10K"}}, {"content": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)\\n\\n\\n<p>Our AI platform, Azure AI, is helping organizations transform, bringing intelligence and insights to the hands of their employees and customers to solve their most pressing challenges. Organizations large and small are deploying Azure AI solutions to achieve more at scale, more easily, with the proper enterprise-level and responsible AI protections.</p>\\n<p>We have a long-term partnership with OpenAI, a leading AI research and deployment company. We deploy OpenAI\\u2019s models across our consumer and enterprise products. As OpenAI\\u2019s exclusive cloud provider, Azure powers all of OpenAI\'s workloads. We have also increased our investments in the development and deployment of specialized supercomputing systems to accelerate OpenAI\\u2019s research.</p>\\n<p>Our hybrid infrastructure offers integrated, end-to-end security, compliance, identity, and management capabilities to support the real-world needs and evolving regulatory requirements of commercial customers and enterprises. Our industry clouds bring together capabilities across the entire Microsoft Cloud, along with industry-specific customizations. Azure Arc simplifies governance and management by delivering a consistent multi-cloud and on-premises management platform.</p>\\n<p>Nuance, a leader in conversational AI and ambient intelligence across industries including healthcare, financial services, retail, and telecommunications, joined Microsoft in 2022. Microsoft and Nuance enable organizations to accelerate their business goals with security-focused, cloud-based solutions infused with AI.</p>\\n<p>We are accelerating our development of mixed reality solutions with new Azure services and devices. Microsoft Mesh enables organizations to create custom, immersive experiences for the workplace to help bring remote and hybrid workers and teams together. </p>\\n<p>The ability to convert data into AI drives our competitive advantage. The Microsoft Intelligent Data Platform is a leading cloud data platform that fully integrates databases, analytics, and governance. The platform empowers organizations to invest more time creating value rather than integrating and managing their data. Microsoft Fabric is an end-to-end, unified analytics platform that brings together all the data and analytics tools that organizations need. </p>", "id": "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6", "chunk_id": 7, "title": "/documents/MSFT_FY23Q4_10K.docx", "filepath": "MSFT_FY23Q4_10K.docx", "url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "metadata": {"offset": 13285, "source": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "markdown_url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "title": "/documents/MSFT_FY23Q4_10K.docx", "original_url": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "chunk": 7, "key": "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6", "filename": "MSFT_FY23Q4_10K"}}, {"content": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)\\n\\n\\n<p>PART I</p>\\n<p>ITEM\\u00a01. BUSINESS</p>\\n<p>GENERAL</p>\\n<p>Embracing Our Future</p>\\n<p>Microsoft is a technology company whose mission is to empower every person and every organization on the planet to achieve more. We strive to create local opportunity, growth, and impact in every country around the world. We are creating the platforms and tools, powered by artificial intelligence (\\u201cAI\\u201d), that deliver better, faster, and more effective solutions to support small and large business competitiveness, improve educational and health outcomes, grow public-sector efficiency, and empower human ingenuity. From infrastructure and data, to business applications and collaboration, we provide unique, differentiated value to customers. </p>\\n<p>In a world of increasing economic complexity, AI has the power to revolutionize many types of work. Microsoft is now innovating and expanding our portfolio with AI capabilities to help people and organizations overcome today\\u2019s challenges and emerge stronger. Customers are looking to unlock value from their digital spend and innovate for this next generation of AI, while simplifying security and management. Those leveraging the Microsoft Cloud are best positioned to take advantage of technological advancements and drive innovation. Our investment in AI spans the entire company, from Microsoft Teams and Outlook, to Bing and Xbox, and we are infusing generative AI capability into our consumer and commercial offerings to deliver copilot capability for all services across the Microsoft Cloud. </p>\\n<p>We\\u2019re committed to making the promise of AI real \\u2013 and doing it responsibly. Our work is guided by a core set of principles: fairness, reliability and safety, privacy and security, inclusiveness, transparency, and accountability. </p>\\n<p>What We Offer</p>\\n<p>Founded in 1975, we develop and support software, services, devices, and solutions that deliver new value for customers and help people and businesses realize their full potential.</p>\\n<p>We offer an array of services, including cloud-based solutions that provide customers with software, services, platforms, and content, and we provide solution support and consulting services. We also deliver relevant online advertising to a global audience.</p>", "id": "doc_14b4ad620c24c5a472f0c4505019c5370b814e17", "chunk_id": 4, "title": "/documents/MSFT_FY23Q4_10K.docx", "filepath": "MSFT_FY23Q4_10K.docx", "url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "metadata": {"offset": 6098, "source": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "markdown_url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "title": "/documents/MSFT_FY23Q4_10K.docx", "original_url": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "chunk": 4, "key": "doc_14b4ad620c24c5a472f0c4505019c5370b814e17", "filename": "MSFT_FY23Q4_10K"}}, {"content": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)\\n\\n\\n<p>Our AI platform, Azure AI, is helping organizations transform, bringing intelligence and insights to the hands of their employees and customers to solve their most pressing challenges. Organizations large and small are deploying Azure AI solutions to achieve more at scale, more easily, with the proper enterprise-level and responsible AI protections.</p>\\n<p>We have a long-term partnership with OpenAI, a leading AI research and deployment company. We deploy OpenAI\\u2019s models across our consumer and enterprise products. As OpenAI\\u2019s exclusive cloud provider, Azure powers all of OpenAI\'s workloads. We have also increased our investments in the development and deployment of specialized supercomputing systems to accelerate OpenAI\\u2019s research.</p>\\n<p>Our hybrid infrastructure offers integrated, end-to-end security, compliance, identity, and management capabilities to support the real-world needs and evolving regulatory requirements of commercial customers and enterprises. Our industry clouds bring together capabilities across the entire Microsoft Cloud, along with industry-specific customizations. Azure Arc simplifies governance and management by delivering a consistent multi-cloud and on-premises management platform.</p>\\n<p>Nuance, a leader in conversational AI and ambient intelligence across industries including healthcare, financial services, retail, and telecommunications, joined Microsoft in 2022. Microsoft and Nuance enable organizations to accelerate their business goals with security-focused, cloud-based solutions infused with AI.</p>\\n<p>We are accelerating our development of mixed reality solutions with new Azure services and devices. Microsoft Mesh enables organizations to create custom, immersive experiences for the workplace to help bring remote and hybrid workers and teams together. </p>\\n<p>The ability to convert data into AI drives our competitive advantage. The Microsoft Intelligent Data Platform is a leading cloud data platform that fully integrates databases, analytics, and governance. The platform empowers organizations to invest more time creating value rather than integrating and managing their data. Microsoft Fabric is an end-to-end, unified analytics platform that brings together all the data and analytics tools that organizations need. </p>", "id": "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6", "chunk_id": 7, "title": "/documents/MSFT_FY23Q4_10K.docx", "filepath": "MSFT_FY23Q4_10K.docx", "url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "metadata": {"offset": 13285, "source": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "markdown_url": "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A23%3A06Z&sp=r&sv=2024-05-04&sr=c&sig=cIyn1/%2Bk5pCX7Liy8PgDiytzArIx/9Vq7GA2eGkmyik%3D)", "title": "/documents/MSFT_FY23Q4_10K.docx", "original_url": "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_", "chunk": 7, "key": "doc_7ff8f57d63e2eebb0a3372db05153822fdee65e6", "filename": "MSFT_FY23Q4_10K"}}], "intent": "Explain Microsoft AI"}',
+            end_turn: false,
+            role: "tool",
+          },
+          {
+            content:
+              "Microsoft AI refers to the artificial intelligence capabilities and offerings provided by Microsoft. It encompasses a range of technologies and solutions that leverage AI to empower individuals and organizations to achieve more. Microsoft's AI platform, Azure AI, enables organizations to transform their operations by bringing intelligence and insights to employees and customers. It offers AI-optimized infrastructure, advanced models, and AI services designed for developers and data scientists[doc2][doc6]. Microsoft's AI capabilities are integrated into various products and services, including Microsoft Teams, Outlook, Bing, Xbox, and the Microsoft Cloud[doc1][doc4]. The company is committed to developing AI responsibly, guided by principles such as fairness, reliability, privacy, and transparency[doc5]. Additionally, Microsoft has a partnership with OpenAI and deploys OpenAI's models across its consumer and enterprise products[doc3]. Overall, Microsoft AI aims to drive innovation, improve productivity, and deliver value to customers across different industries and sectors.",
+            end_turn: true,
+            role: "assistant",
+          },
+        ],
+      },
+    ],
+    created: "response.created",
+    id: "response.id",
+    model: "gpt-35-turbo-16k",
+    object: "response.object",
+  };
+  
+  export const citationObj = {
+    content:
+      "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A38%3A07Z&sp=r&sv=2024-05-04&sr=c&sig=8fFfpNI/tv2rdTKAcunuWpW6zJkZuw%2BGvEGo2zQ1QSA%3D)\n\n\n<p>The ability to convert data into AI drives our competitive advantage. The Microsoft Intelligent Data Platform is a leading cloud data platform that fully integrates databases, analytics, and governance. The platform empowers organizations to invest more time creating value rather than integrating and managing their data. Microsoft Fabric is an end-to-end, unified analytics platform that brings together all the data and analytics tools that organizations need. </p>\n<p>GitHub Copilot is at the forefront of AI-powered software development, giving developers a new tool to write code easier and faster so they can focus on more creative problem-solving. From GitHub to Visual Studio, we provide a developer tool chain for everyone, no matter the technical experience, across all platforms, whether Azure, Windows, or any other cloud or client platform.</p>\n<p>Windows also plays a critical role in fueling our cloud business with Windows 365, a desktop operating system that’s also a cloud service. From another internet-connected device, including Android or macOS devices, users can run Windows 365, just like a virtual machine.</p>\n<p>Additionally, we are extending our infrastructure beyond the planet, bringing cloud computing to space. Azure Orbital is a fully managed ground station as a service for fast downlinking of data.</p>\n<p>Create More Personal Computing</p>\n<p>We strive to make computing more personal, enabling users to interact with technology in more intuitive, engaging, and dynamic ways. </p>\n<p>Windows 11 offers innovations focused on enhancing productivity, including Windows Copilot with centralized AI assistance and Dev Home to help developers become more productive. Windows 11 security and privacy features include operating system security, application security, and user and identity security. </p>\n<p>Through our Search, News, Mapping, and Browser services, Microsoft delivers unique trust, privacy, and safety features. In February 2023, we launched an all new, AI-powered Microsoft Edge browser and Bing search engine with Bing Chat to deliver better search, more complete answers, and the ability to generate content. Microsoft Edge is our fast and secure browser that helps protect users’ data. Quick access to AI-powered tools, apps, and more within Microsoft Edge’s sidebar enhance browsing capabilities.</p>",
+    id: "2",
+    chunk_id: 8,
+    title: "/documents/MSFT_FY23Q4_10K.docx",
+    filepath: "MSFT_FY23Q4_10K.docx",
+    url: "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A38%3A07Z&sp=r&sv=2024-05-04&sr=c&sig=8fFfpNI/tv2rdTKAcunuWpW6zJkZuw%2BGvEGo2zQ1QSA%3D)",
+    metadata: {
+      offset: 15580,
+      source:
+        "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_",
+      markdown_url:
+        "[/documents/MSFT_FY23Q4_10K.docx](https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx?se=2024-10-01T05%3A38%3A07Z&sp=r&sv=2024-05-04&sr=c&sig=8fFfpNI/tv2rdTKAcunuWpW6zJkZuw%2BGvEGo2zQ1QSA%3D)",
+      title: "/documents/MSFT_FY23Q4_10K.docx",
+      original_url:
+        "https://str5z43dncphzu3k.blob.core.windows.net/documents/MSFT_FY23Q4_10K.docx_SAS_TOKEN_PLACEHOLDER_",
+      chunk: 8,
+      key: "doc_d85da45581d92f2ff59e261197d2c70c2b6f8802",
+      filename: "MSFT_FY23Q4_10K",
+    },
+    reindex_id: "1",
+  };
+  
+  export const AIResponseContent =
+    "Microsoft AI refers to the artificial intelligence capabilities and offerings provided by Microsoft. It encompasses a range of technologies and solutions that leverage AI to empower individuals and organizations to achieve more. Microsoft's AI platform, Azure AI, enables organizations to transform their operations by bringing intelligence and insights to employees and customers. It offers AI-optimized infrastructure, advanced models, and AI services designed for developers and data scientists is an ";
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/__mocks__/react-markdown.tsx b/ClientAdvisor/App/frontend/__mocks__/react-markdown.tsx
new file mode 100644
index 000000000..587310af8
--- /dev/null
+++ b/ClientAdvisor/App/frontend/__mocks__/react-markdown.tsx
@@ -0,0 +1,17 @@
+// __mocks__/react-markdown.tsx
+
+import React from 'react';
+
+// Mock implementation of react-markdown
+const mockNode = {
+  children: [{ value: 'console.log("Test Code");' }]
+};
+const mockProps = { className: 'language-javascript' };
+
+const ReactMarkdown: React.FC<{ children: React.ReactNode , components: any }> = ({ children,components }) => {
+  return <div data-testid="reactMockDown">
+    {components && components.code({ node: mockNode, ...mockProps })}
+    {children}</div>; // Simply render the children
+};
+
+export default ReactMarkdown;
diff --git a/ClientAdvisor/App/frontend/jest.config.ts b/ClientAdvisor/App/frontend/jest.config.ts
index 956deb7d7..d2c422755 100644
--- a/ClientAdvisor/App/frontend/jest.config.ts
+++ b/ClientAdvisor/App/frontend/jest.config.ts
@@ -2,10 +2,47 @@ import type { Config } from '@jest/types'
 
 const config: Config.InitialOptions = {
   verbose: true,
+
+  preset: 'ts-jest',
+  //testEnvironment: 'jsdom',  // For React DOM testing
+  testEnvironment: 'jest-environment-jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ['']
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': 'identity-obj-proxy', // For mocking static file imports
+    '^react-markdown$': '<rootDir>/__mocks__/react-markdown.tsx',
+    '^dompurify$': '<rootDir>/__mocks__/dompurify.js', // Point to the mock
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.ts',
+
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/test/setupTests.ts'], // For setting up testing environment like jest-dom
   transform: {
-    '^.+\\.tsx?$': 'ts-jest'
+    '^.+\\.ts(x)?$': 'ts-jest',  // For TypeScript files
+    '^.+\\.js$': 'babel-jest',  // For JavaScript files if you have Babel
   },
-  setupFilesAfterEnv: ['<rootDir>/polyfills.js']
+
+  setupFiles: ['<rootDir>/jest.polyfills.js'],
+  collectCoverage: true,
+  //collectCoverageFrom: ['src/**/*.{ts,tsx}'],  // Adjust the path as needed
+  //coverageReporters: ['json', 'lcov', 'text', 'clover'],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80,
+    },
+  },
+
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules/', // Ignore node_modules
+    '<rootDir>/__mocks__/', // Ignore mocks
+    '<rootDir>/src/state/',
+    '<rootDir>/src/api/',
+    '<rootDir>/src/mocks/',
+    //'<rootDir>/src/test/',
+  ],
 }
 
 export default config
diff --git a/ClientAdvisor/App/frontend/jest.polyfills.js b/ClientAdvisor/App/frontend/jest.polyfills.js
new file mode 100644
index 000000000..5aeed29c2
--- /dev/null
+++ b/ClientAdvisor/App/frontend/jest.polyfills.js
@@ -0,0 +1,28 @@
+/**
+ * @note The block below contains polyfills for Node.js globals
+ * required for Jest to function when running JSDOM tests.
+ * These HAVE to be require's and HAVE to be in this exact
+ * order, since "undici" depends on the "TextEncoder" global API.
+ *
+ * Consider migrating to a more modern test runner if
+ * you don't want to deal with this.
+ */
+
+const { TextDecoder, TextEncoder } = require('node:util')
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+})
+
+const { Blob } = require('node:buffer')
+const { fetch, Headers, FormData, Request, Response } = require('undici')
+
+Object.defineProperties(globalThis, {
+  fetch: { value: fetch, writable: true },
+  Blob: { value: Blob },
+  Headers: { value: Headers },
+  FormData: { value: FormData },
+  Request: { value: Request },
+  Response: { value: Response },
+})
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/package.json b/ClientAdvisor/App/frontend/package.json
index 15c9c5c91..d1ca6788b 100644
--- a/ClientAdvisor/App/frontend/package.json
+++ b/ClientAdvisor/App/frontend/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "watch": "tsc && vite build --watch",
-    "test": "jest",
+    "test": "jest --coverage --verbose",
+    "test:coverage": "jest --coverage --verbose --watchAll",
     "lint": "npx eslint src",
     "lint:fix": "npx eslint --fix",
     "prettier": "npx prettier src --check",
@@ -24,17 +25,20 @@
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "^7.0.1",
     "react-router-dom": "^6.8.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-uuid": "^2.0.0",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
-    "remark-supersub": "^1.0.0"
+    "remark-supersub": "^1.0.0",
+    "undici": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.0.2",
     "@eslint/js": "^9.1.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/dompurify": "^3.0.5",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/jest": "^29.5.12",
@@ -44,6 +48,7 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/testing-library__user-event": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^3.1.0",
@@ -59,12 +64,16 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "globals": "^15.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
+    "msw": "2.2.2",
     "prettier": "^3.2.5",
+    "react-markdown": "^8.0.0",
     "react-test-renderer": "^18.2.0",
     "string.prototype.replaceall": "^1.0.10",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^4.9.5",
     "vite": "^4.1.5"
diff --git a/ClientAdvisor/App/frontend/src/api/models.ts b/ClientAdvisor/App/frontend/src/api/models.ts
index 55c0756fe..43cb84c82 100644
--- a/ClientAdvisor/App/frontend/src/api/models.ts
+++ b/ClientAdvisor/App/frontend/src/api/models.ts
@@ -141,3 +141,9 @@ export interface ClientIdRequest {
 }
 
 
+export interface GroupedChatHistory {
+  month: string
+  entries: Conversation[]
+}
+
+
diff --git a/ClientAdvisor/App/frontend/src/components/Answer/Answer.test.tsx b/ClientAdvisor/App/frontend/src/components/Answer/Answer.test.tsx
new file mode 100644
index 000000000..5547f1f44
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/Answer/Answer.test.tsx
@@ -0,0 +1,543 @@
+import { renderWithContext, screen, waitFor, fireEvent, act, logRoles } from '../../test/test.utils';
+import { Answer } from './Answer'
+import { AppStateContext } from '../../state/AppProvider'
+import {AskResponse, Citation, Feedback, historyMessageFeedback } from '../../api';
+//import { Feedback, AskResponse, Citation } from '../../api/models'
+import { cloneDeep } from 'lodash'
+import userEvent from '@testing-library/user-event';
+import { CitationPanel } from '../../pages/chat/Components/CitationPanel';
+
+// Mock required modules and functions
+jest.mock('../../api/api', () => ({
+    historyMessageFeedback: jest.fn(),
+}))
+
+jest.mock('react-syntax-highlighter/dist/esm/styles/prism', () => ({
+    nord: {
+        // Mock style object (optional)
+        'code[class*="language-"]': {
+            color: '#e0e0e0', // Example mock style
+            background: '#2e3440', // Example mock style
+        },
+    },
+}));
+
+// Mocking remark-gfm and rehype-raw
+jest.mock('remark-gfm', () => jest.fn());
+jest.mock('rehype-raw', () => jest.fn());
+jest.mock('remark-supersub', () => jest.fn());
+
+const mockDispatch = jest.fn();
+const mockOnCitationClicked = jest.fn();
+
+// Mock context provider values
+let mockAppState = {
+    frontendSettings: { feedback_enabled: true, sanitize_answer: true },
+    isCosmosDBAvailable: { cosmosDB: true },
+
+}
+
+const mockCitations: Citation[] = [
+    {
+        id: 'doc1',
+        filepath: 'C:\code\CWYOD-2\chat-with-your-data-solution-accelerator\docs\file1.pdf',
+        part_index: undefined,
+        content: '',
+        title: null,
+        url: null,
+        metadata: null,
+        chunk_id: null,
+        reindex_id: '1'
+    },
+    {
+        id: 'doc2',
+        filepath: 'file2.pdf',
+        part_index: undefined,
+        content: '',
+        title: null,
+        url: null,
+        metadata: null,
+        chunk_id: null,
+        reindex_id: '2'
+    },
+    {
+        id: 'doc3',
+        filepath: '',
+        part_index: undefined,
+        content: '',
+        title: null,
+        url: null,
+        metadata: null,
+        chunk_id: null,
+        reindex_id: '3'
+    }
+]
+let mockAnswerProps: AskResponse = {
+    answer: 'This is an example answer with citations [doc1] and [doc2] and [doc3].',
+    message_id: '123',
+    feedback: Feedback.Neutral,
+    citations: cloneDeep(mockCitations)
+}
+
+const toggleIsRefAccordionOpen = jest.fn();
+const onCitationClicked = jest.fn();
+
+describe('Answer Component', () => {
+    beforeEach(() => {
+        global.fetch = jest.fn();
+        onCitationClicked.mockClear();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const isEmpty = (obj: any) => Object.keys(obj).length === 0;
+
+    const renderComponent = (props?: any, appState?: any) => {
+        if (appState != undefined) {
+            mockAppState = { ...mockAppState, ...appState }
+        }
+        return (
+            renderWithContext(<Answer answer={(props == undefined || isEmpty(props)) ? mockAnswerProps : props} onCitationClicked={onCitationClicked} />, mockAppState)
+        )
+
+    }
+
+
+    it('should render the answer component correctly', () => {
+        renderComponent();
+
+        // Check if citations and feedback buttons are rendered
+        expect(screen.getByText(/This is an example answer with citations/i)).toBeInTheDocument();
+        expect(screen.getByLabelText('Like this response')).toBeInTheDocument();
+        expect(screen.getByLabelText('Dislike this response')).toBeInTheDocument();
+    });
+
+    it('should render the answer component correctly when sanitize_answer is false', () => {
+
+        const answerWithMissingFeedback = {
+           ...mockAnswerProps
+        }
+        const extraMockState = {
+            frontendSettings: { feedback_enabled: true, sanitize_answer: false },
+        }
+        
+        renderComponent(answerWithMissingFeedback,extraMockState);
+
+        // Check if citations and feedback buttons are rendered
+        expect(screen.getByText(/This is an example answer with citations/i)).toBeInTheDocument();
+    });
+
+    it('should show "1 reference" when citations lenght is one', () => {
+
+        const answerWithMissingFeedback = {
+           ...mockAnswerProps,
+           answer: 'This is an example answer with citations [doc1]',
+        }
+        
+        renderComponent(answerWithMissingFeedback);
+
+        // Check if citations and feedback buttons are rendered
+        expect(screen.getByText(/1 reference/i)).toBeInTheDocument();
+    });
+
+
+    it('returns undefined when message_id is undefined', () => {
+
+        const answerWithMissingFeedback = {
+            answer: 'This is an example answer with citations [doc1] and [doc2].',
+            feedback: 'Test',
+            citations: []
+        }
+
+        renderComponent(answerWithMissingFeedback);
+
+        // Check if citations and feedback buttons are rendered
+        expect(screen.getByText(/This is an example answer with citations/i)).toBeInTheDocument();
+    });
+
+    it('returns undefined when feedback is undefined', () => {
+
+        const answerWithMissingFeedback = {
+            answer: 'This is an example answer with citations [doc1] and [doc2].',
+            message_id: '123',
+            citations: []
+        }
+
+        renderComponent(answerWithMissingFeedback);
+
+        // Check if citations and feedback buttons are rendered
+        expect(screen.getByText(/This is an example answer with citations/i)).toBeInTheDocument();
+    });
+
+    it('returns Feedback.Negative when feedback contains more than one item', () => {
+
+        const answerWithMissingFeedback = {
+            answer: 'This is an example answer with citations [doc1] and [doc2].',
+            message_id: '123',
+            feedback: 'negative,neutral',
+            citations: []
+        }
+
+        renderComponent(answerWithMissingFeedback);
+
+        // Check if citations and feedback buttons are rendered
+        expect(screen.getByText(/This is an example answer with citations/i)).toBeInTheDocument();
+    });
+
+
+    it('calls toggleIsRefAccordionOpen when Enter key is pressed', () => {
+        renderComponent();
+
+        // Check if citations and feedback buttons are rendered
+        const stackItem = screen.getByTestId('stack-item');
+
+        // Simulate pressing the Enter key
+        fireEvent.keyDown(stackItem, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+        // Check if the function is called
+        // expect(onCitationClicked).toHaveBeenCalled();
+    });
+
+    it('calls toggleIsRefAccordionOpen when Space key is pressed', () => {
+        renderComponent();
+
+        // Check if citations and feedback buttons are rendered
+        const stackItem = screen.getByTestId('stack-item');
+
+        // Simulate pressing the Escape key
+        fireEvent.keyDown(stackItem, { key: ' ', code: 'Space', charCode: 32 });
+
+        // Check if the function is called
+        // expect(toggleIsRefAccordionOpen).toHaveBeenCalled();
+    });
+
+    it('does not call toggleIsRefAccordionOpen when Tab key is pressed', () => {
+        renderComponent();
+    
+        const stackItem = screen.getByTestId('stack-item');
+    
+        // Simulate pressing the Tab key
+        fireEvent.keyDown(stackItem, { key: 'Tab', code: 'Tab', charCode: 9 });
+    
+        // Check that the function is not called
+        expect(toggleIsRefAccordionOpen).not.toHaveBeenCalled();
+      });
+
+
+    it('should handle chevron click to toggle references accordion', async () => {
+        renderComponent();
+
+        // Chevron is initially collapsed
+        const chevronIcon = screen.getByRole('button', { name: 'Open references' });
+        const element = screen.getByTestId('ChevronIcon')
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronRight')
+
+        // Click to expand
+        fireEvent.click(chevronIcon);
+        //expect(screen.getByText('ChevronDown')).toBeInTheDocument();
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronDown')
+    });
+
+    it('calls onCitationClicked when citation is clicked', async () => {
+        userEvent.setup();
+        renderComponent();
+
+        // Chevron is initially collapsed
+        const chevronIcon = screen.getByRole('button', { name: 'Open references' });
+        const element = screen.getByTestId('ChevronIcon')
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronRight')
+
+        // Click to expand
+        await userEvent.click(chevronIcon);
+        const citations = screen.getAllByRole('link');
+
+        // Simulate click on the first citation
+        await userEvent.click(citations[0]);
+
+        // Check if the function is called with the correct citation
+        expect(onCitationClicked).toHaveBeenCalledTimes(1);
+    })
+
+    it('calls onCitationClicked when Enter key is pressed', async () => {
+        userEvent.setup();
+        renderComponent();
+
+        // Chevron is initially collapsed
+        const chevronIcon = screen.getByRole('button', { name: 'Open references' });
+        const element = screen.getByTestId('ChevronIcon')
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronRight')
+
+        // Click to expand
+        await userEvent.click(chevronIcon);
+
+        // Get the first citation span
+        const citation = screen.getAllByRole('link')[0];
+
+        // Simulate pressing the Enter key
+        fireEvent.keyDown(citation, { key: 'Enter', code: 'Enter' });
+
+        // Check if the function is called with the correct citation
+        expect(onCitationClicked).toHaveBeenCalledTimes(1)
+    });
+
+    it('calls onCitationClicked when Space key is pressed', async () => {
+        userEvent.setup();
+        renderComponent();
+
+        // Chevron is initially collapsed
+        const chevronIcon = screen.getByRole('button', { name: 'Open references' });
+        const element = screen.getByTestId('ChevronIcon')
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronRight')
+
+        // Click to expand
+        await userEvent.click(chevronIcon);
+
+        // Get the first citation span
+        const citation = screen.getAllByRole('link')[0];
+
+        // Simulate pressing the Space key
+        fireEvent.keyDown(citation, { key: ' ', code: 'Space' });
+
+        // Check if the function is called with the correct citation
+        expect(onCitationClicked).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onCitationClicked for other keys', async() => {
+        userEvent.setup();
+        renderComponent();
+
+        // Chevron is initially collapsed
+        const chevronIcon = screen.getByRole('button', { name: 'Open references' });
+        const element = screen.getByTestId('ChevronIcon')
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronRight')
+
+        // Click to expand
+        await userEvent.click(chevronIcon);
+    
+        // Get the first citation span
+        const citation = screen.getAllByRole('link')[0];
+    
+        // Simulate pressing a different key (e.g., 'a')
+        fireEvent.keyDown(citation, { key: 'a', code: 'KeyA' });
+    
+        // Check if the function is not called
+        expect(onCitationClicked).not.toHaveBeenCalled();
+      });
+
+    it('should update feedback state on like button click', async () => {
+        renderComponent();
+
+        const likeButton = screen.getByLabelText('Like this response');
+
+        // Initially neutral feedback
+        await act(async () => {
+            fireEvent.click(likeButton);
+        });
+        await waitFor(() => {
+            expect(historyMessageFeedback).toHaveBeenCalledWith(mockAnswerProps.message_id, Feedback.Positive);
+        });
+
+        // // Clicking again should set feedback to neutral
+        // const likeButton1 = screen.getByLabelText('Like this response');
+        // await act(async()=>{
+        //     fireEvent.click(likeButton1);
+        // });
+        // await waitFor(() => {
+        //   expect(historyMessageFeedback).toHaveBeenCalledWith(mockAnswerProps.message_id, Feedback.Neutral);
+        // });
+    });
+
+    it('should open and submit negative feedback dialog', async () => {
+        userEvent.setup();
+        renderComponent();
+        const handleChange = jest.fn();
+        const dislikeButton = screen.getByLabelText('Dislike this response');
+
+        // Click dislike to open dialog
+        await fireEvent.click(dislikeButton);
+        expect(screen.getByText("Why wasn't this response helpful?")).toBeInTheDocument();
+
+        // Select feedback and submit
+        const checkboxEle = await screen.findByLabelText(/Citations are wrong/i)
+        //logRoles(checkboxEle)
+        await waitFor(() => {
+            userEvent.click(checkboxEle);
+        });
+        await userEvent.click(screen.getByText('Submit'));
+
+        await waitFor(() => {
+            expect(historyMessageFeedback).toHaveBeenCalledWith(mockAnswerProps.message_id, `${Feedback.WrongCitation}`);
+        });
+    });
+
+    it('calls resetFeedbackDialog and setFeedbackState with Feedback.Neutral on dialog dismiss', async () => {
+
+        const resetFeedbackDialogMock = jest.fn();
+        const setFeedbackStateMock = jest.fn();
+
+        userEvent.setup();
+        renderComponent();
+        const handleChange = jest.fn();
+        const dislikeButton = screen.getByLabelText('Dislike this response');
+
+        // Click dislike to open dialog
+        await userEvent.click(dislikeButton);
+        expect(screen.getByText("Why wasn't this response helpful?")).toBeInTheDocument();
+
+        // Assuming there is a close button in the dialog that dismisses it
+        const dismissButton = screen.getByRole('button', { name: /close/i }); // Adjust selector as needed
+
+        // Simulate clicking the dismiss button
+        await userEvent.click(dismissButton);
+
+        // Assert that the mocks were called
+        //expect(resetFeedbackDialogMock).toHaveBeenCalled();
+        //expect(setFeedbackStateMock).toHaveBeenCalledWith('Neutral');
+
+    });
+
+
+    it('Dialog Options should be able to select and unSelect', async () => {
+        userEvent.setup();
+        renderComponent();
+        const handleChange = jest.fn();
+        const dislikeButton = screen.getByLabelText('Dislike this response');
+
+        // Click dislike to open dialog
+        await userEvent.click(dislikeButton);
+
+        expect(screen.getByText("Why wasn't this response helpful?")).toBeInTheDocument();
+
+        // Select feedback and submit
+        const checkboxEle = await screen.findByLabelText(/Citations are wrong/i)
+        expect(checkboxEle).not.toBeChecked();
+
+        await userEvent.click(checkboxEle);
+        await waitFor(() => {
+            expect(checkboxEle).toBeChecked();
+        });
+
+        const checkboxEle1 = await screen.findByLabelText(/Citations are wrong/i)
+
+        await userEvent.click(checkboxEle1);
+        await waitFor(() => {
+            expect(checkboxEle1).not.toBeChecked();
+        });
+
+    });
+
+    it('Should able to show ReportInappropriateFeedbackContent form while click on "InappropriateFeedback" button ', async () => {
+        userEvent.setup();
+        renderComponent();
+        const handleChange = jest.fn();
+        const dislikeButton = screen.getByLabelText('Dislike this response');
+
+        // Click dislike to open dialog
+        await userEvent.click(dislikeButton);
+
+        const InappropriateFeedbackDivBtn = screen.getByTestId("InappropriateFeedback")
+        expect(InappropriateFeedbackDivBtn).toBeInTheDocument();
+
+        await userEvent.click(InappropriateFeedbackDivBtn);
+
+        await waitFor(() => {
+            expect(screen.getByTestId("ReportInappropriateFeedbackContent")).toBeInTheDocument();
+        })
+    });
+
+    it('should handle citation click and trigger callback', async () => {
+        userEvent.setup();
+        renderComponent();
+        const citationText = screen.getByTestId('ChevronIcon');
+        await userEvent.click(citationText);
+        expect(citationText).toHaveAttribute('data-icon-name', 'ChevronDown')
+    });
+
+    it('should handle if we do not pass feedback ', () => {
+
+        const answerWithMissingFeedback = {
+            answer: 'This is an example answer with citations [doc1] and [doc2].',
+            message_id: '123',
+            feedback: 'Test',
+            citations: []
+        }
+        const extraMockState = {
+            feedbackState: { '123': Feedback.Neutral },
+        }
+        renderComponent(answerWithMissingFeedback, extraMockState);
+    })
+
+
+    it('should update feedback state on like button click - 1', async () => {
+
+        const answerWithMissingFeedback = {
+            ...mockAnswerProps,
+            answer: 'This is an example answer with citations [doc1] and [doc2].',
+            message_id: '123',
+            feedback: Feedback.Neutral,
+        }
+        const extraMockState = {
+            feedbackState: { '123': Feedback.Positive },
+        }
+        renderComponent(answerWithMissingFeedback, extraMockState);
+        const likeButton = screen.getByLabelText('Like this response');
+
+        // Initially neutral feedback
+        await act(async () => {
+            fireEvent.click(likeButton);
+        });
+        await waitFor(() => {
+            expect(historyMessageFeedback).toHaveBeenCalledWith(mockAnswerProps.message_id, Feedback.Neutral);
+        });
+
+    });
+
+    it('should open and submit negative feedback dialog -1', async () => {
+        userEvent.setup();
+        const answerWithMissingFeedback = {
+            ...mockAnswerProps,
+            answer: 'This is an example answer with citations [doc1] and [doc2].',
+            message_id: '123',
+            feedback: Feedback.OtherHarmful,
+        }
+        const extraMockState = {
+            feedbackState: { '123': Feedback.OtherHarmful },
+        }
+        renderComponent(answerWithMissingFeedback, extraMockState);
+        const handleChange = jest.fn();
+        const dislikeButton = screen.getByLabelText('Dislike this response');
+
+        // Click dislike to open dialog
+        await userEvent.click(dislikeButton);
+        await waitFor(() => {
+            expect(historyMessageFeedback).toHaveBeenCalledWith(mockAnswerProps.message_id, Feedback.Neutral);
+        });
+    });
+
+    it('should handle chevron click to toggle references accordion - 1', async () => {
+        let tempMockCitation = [...mockCitations];
+
+        tempMockCitation[0].filepath = '';
+        tempMockCitation[0].reindex_id = '';
+        const answerWithMissingFeedback = {
+            ...mockAnswerProps,
+            CitationPanel: [...tempMockCitation]
+        }
+
+        renderComponent();
+
+        // Chevron is initially collapsed
+        const chevronIcon = screen.getByRole('button', { name: 'Open references' });
+        const element = screen.getByTestId('ChevronIcon')
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronRight')
+
+        // Click to expand
+        fireEvent.click(chevronIcon);
+        //expect(screen.getByText('ChevronDown')).toBeInTheDocument();
+        expect(element).toHaveAttribute('data-icon-name', 'ChevronDown')
+    });
+
+
+})
diff --git a/ClientAdvisor/App/frontend/src/components/Answer/Answer.tsx b/ClientAdvisor/App/frontend/src/components/Answer/Answer.tsx
index 744a003d6..08c345ea8 100644
--- a/ClientAdvisor/App/frontend/src/components/Answer/Answer.tsx
+++ b/ClientAdvisor/App/frontend/src/components/Answer/Answer.tsx
@@ -16,6 +16,7 @@ import { AppStateContext } from '../../state/AppProvider'
 import { parseAnswer } from './AnswerParser'
 
 import styles from './Answer.module.css'
+import rehypeRaw from 'rehype-raw'
 
 interface Props {
   answer: AskResponse
@@ -77,8 +78,8 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
       } else {
         citationFilename = `${citation.filepath} - Part ${part_i}`
       }
-    } else if (citation.filepath && citation.reindex_id) {
-      citationFilename = `${citation.filepath} - Part ${citation.reindex_id}`
+      // } else if (citation.filepath && citation.reindex_id) {
+      //   citationFilename = `${citation.filepath} - Part ${citation.reindex_id}`
     } else {
       citationFilename = `Citation ${index}`
     }
@@ -86,63 +87,70 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
   }
 
   const onLikeResponseClicked = async () => {
-    if (answer.message_id == undefined) return
+    // if (answer.message_id == undefined) return
+    if (answer.message_id) {
+      let newFeedbackState = feedbackState
+      // Set or unset the thumbs up state
+      if (feedbackState == Feedback.Positive) {
+        newFeedbackState = Feedback.Neutral
+      } else {
+        newFeedbackState = Feedback.Positive
+      }
+      appStateContext?.dispatch({
+        type: 'SET_FEEDBACK_STATE',
+        payload: { answerId: answer.message_id, feedback: newFeedbackState }
+      })
+      setFeedbackState(newFeedbackState)
 
-    let newFeedbackState = feedbackState
-    // Set or unset the thumbs up state
-    if (feedbackState == Feedback.Positive) {
-      newFeedbackState = Feedback.Neutral
-    } else {
-      newFeedbackState = Feedback.Positive
+      // Update message feedback in db
+      await historyMessageFeedback(answer.message_id, newFeedbackState)
     }
-    appStateContext?.dispatch({
-      type: 'SET_FEEDBACK_STATE',
-      payload: { answerId: answer.message_id, feedback: newFeedbackState }
-    })
-    setFeedbackState(newFeedbackState)
-
-    // Update message feedback in db
-    await historyMessageFeedback(answer.message_id, newFeedbackState)
   }
 
   const onDislikeResponseClicked = async () => {
-    if (answer.message_id == undefined) return
-
-    let newFeedbackState = feedbackState
-    if (feedbackState === undefined || feedbackState === Feedback.Neutral || feedbackState === Feedback.Positive) {
-      newFeedbackState = Feedback.Negative
-      setFeedbackState(newFeedbackState)
-      setIsFeedbackDialogOpen(true)
-    } else {
-      // Reset negative feedback to neutral
-      newFeedbackState = Feedback.Neutral
-      setFeedbackState(newFeedbackState)
-      await historyMessageFeedback(answer.message_id, Feedback.Neutral)
+    //if (answer.message_id == undefined) return
+    if (answer.message_id) {
+      let newFeedbackState = feedbackState
+      if (feedbackState === undefined || feedbackState === Feedback.Neutral || feedbackState === Feedback.Positive) {
+        newFeedbackState = Feedback.Negative
+        setFeedbackState(newFeedbackState)
+        setIsFeedbackDialogOpen(true)
+      } else {
+        // Reset negative feedback to neutral
+        newFeedbackState = Feedback.Neutral
+        setFeedbackState(newFeedbackState)
+        await historyMessageFeedback(answer.message_id, Feedback.Neutral)
+      }
+      appStateContext?.dispatch({
+        type: 'SET_FEEDBACK_STATE',
+        payload: { answerId: answer.message_id, feedback: newFeedbackState }
+      })
     }
-    appStateContext?.dispatch({
-      type: 'SET_FEEDBACK_STATE',
-      payload: { answerId: answer.message_id, feedback: newFeedbackState }
-    })
   }
 
   const updateFeedbackList = (ev?: FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
-    if (answer.message_id == undefined) return
-    const selectedFeedback = (ev?.target as HTMLInputElement)?.id as Feedback
+    //if (answer.message_id == undefined) return
+    if (answer.message_id){
+      const selectedFeedback = (ev?.target as HTMLInputElement)?.id as Feedback
 
-    let feedbackList = negativeFeedbackList.slice()
-    if (checked) {
-      feedbackList.push(selectedFeedback)
-    } else {
-      feedbackList = feedbackList.filter(f => f !== selectedFeedback)
+      let feedbackList = negativeFeedbackList.slice()
+      if (checked) {
+        feedbackList.push(selectedFeedback)
+      } else {
+        feedbackList = feedbackList.filter(f => f !== selectedFeedback)
+      }
+  
+      setNegativeFeedbackList(feedbackList)
     }
-
-    setNegativeFeedbackList(feedbackList)
+  
   }
 
   const onSubmitNegativeFeedback = async () => {
-    if (answer.message_id == undefined) return
-    await historyMessageFeedback(answer.message_id, negativeFeedbackList.join(','))
-    resetFeedbackDialog()
+    //if (answer.message_id == undefined) return
+    if (answer.message_id) {
+      await historyMessageFeedback(answer.message_id, negativeFeedbackList.join(','))
+      resetFeedbackDialog()
+    }
   }
 
   const resetFeedbackDialog = () => {
@@ -182,7 +190,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
             defaultChecked={negativeFeedbackList.includes(Feedback.OtherUnhelpful)}
             onChange={updateFeedbackList}></Checkbox>
         </Stack>
-        <div onClick={() => setShowReportInappropriateFeedback(true)} style={{ color: '#115EA3', cursor: 'pointer' }}>
+        <div data-testid="InappropriateFeedback" onClick={() => setShowReportInappropriateFeedback(true)} style={{ color: '#115EA3', cursor: 'pointer' }}>
           Report inappropriate content
         </div>
       </>
@@ -191,7 +199,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
 
   const ReportInappropriateFeedbackContent = () => {
     return (
-      <>
+      <div data-testid="ReportInappropriateFeedbackContent">
         <div>
           The content is <span style={{ color: 'red' }}>*</span>
         </div>
@@ -222,12 +230,12 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
             defaultChecked={negativeFeedbackList.includes(Feedback.OtherHarmful)}
             onChange={updateFeedbackList}></Checkbox>
         </Stack>
-      </>
+      </div>
     )
   }
 
   const components = {
-    code({ node, ...props }: { node: any; [key: string]: any }) {
+    code({ node, ...props }: { node: any;[key: string]: any }) {
       let language
       if (props.className) {
         const match = props.className.match(/language-(\w+)/)
@@ -250,6 +258,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
               <ReactMarkdown
                 linkTarget="_blank"
                 remarkPlugins={[remarkGfm, supersub]}
+                rehypePlugins={[rehypeRaw]}
                 children={
                   SANITIZE_ANSWER
                     ? DOMPurify.sanitize(parsedAnswer.markdownFormatText, { ALLOWED_TAGS: XSSAllowTags })
@@ -268,7 +277,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
                     onClick={() => onLikeResponseClicked()}
                     style={
                       feedbackState === Feedback.Positive ||
-                      appStateContext?.state.feedbackState[answer.message_id] === Feedback.Positive
+                        appStateContext?.state.feedbackState[answer.message_id] === Feedback.Positive
                         ? { color: 'darkgreen', cursor: 'pointer' }
                         : { color: 'slategray', cursor: 'pointer' }
                     }
@@ -279,8 +288,8 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
                     onClick={() => onDislikeResponseClicked()}
                     style={
                       feedbackState !== Feedback.Positive &&
-                      feedbackState !== Feedback.Neutral &&
-                      feedbackState !== undefined
+                        feedbackState !== Feedback.Neutral &&
+                        feedbackState !== undefined
                         ? { color: 'darkred', cursor: 'pointer' }
                         : { color: 'slategray', cursor: 'pointer' }
                     }
@@ -292,7 +301,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
         </Stack.Item>
         <Stack horizontal className={styles.answerFooter}>
           {!!parsedAnswer.citations.length && (
-            <Stack.Item onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? toggleIsRefAccordionOpen() : null)}>
+            <Stack.Item data-testid="stack-item" onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? toggleIsRefAccordionOpen() : null)}>
               <Stack style={{ width: '100%' }}>
                 <Stack horizontal horizontalAlign="start" verticalAlign="center">
                   <Text
@@ -308,6 +317,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
                     </span>
                   </Text>
                   <FontIcon
+                    data-testid="ChevronIcon"
                     className={styles.accordionIcon}
                     onClick={handleChevronClick}
                     iconName={chevronIsExpanded ? 'ChevronDown' : 'ChevronRight'}
diff --git a/ClientAdvisor/App/frontend/src/components/Cards/Cards.module.css b/ClientAdvisor/App/frontend/src/components/Cards/Cards.module.css
index 69033755d..40377aef7 100644
--- a/ClientAdvisor/App/frontend/src/components/Cards/Cards.module.css
+++ b/ClientAdvisor/App/frontend/src/components/Cards/Cards.module.css
@@ -39,7 +39,7 @@
   }
   
   .userCardContainer.selected {
-    background-color: #0078D7;
+    background-color: #0F6CBD;
     color: white;
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12); 
   } 
diff --git a/ClientAdvisor/App/frontend/src/components/Cards/Cards.test.tsx b/ClientAdvisor/App/frontend/src/components/Cards/Cards.test.tsx
new file mode 100644
index 000000000..930cdf539
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/Cards/Cards.test.tsx
@@ -0,0 +1,202 @@
+import Cards from './Cards'
+import { renderWithContext, screen, waitFor, fireEvent, act } from '../../test/test.utils'
+import { getUsers } from '../../api'
+import userEvent from '@testing-library/user-event'
+
+// Mock API
+jest.mock('../../api/api', () => ({
+  getUsers: jest.fn()
+}))
+
+beforeEach(() => {
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+const mockDispatch = jest.fn()
+const mockOnCardClick = jest.fn()
+
+jest.mock('../UserCard/UserCard', () => ({
+  UserCard: (props: any) => (
+    <div data-testid="user-card-mock" onClick={() => props.onCardClick(props)}>
+      {props.ClientName}
+      <span>{props.isSelected ? 'Selected' : 'not selected'}</span>
+    </div>
+  )
+}))
+
+const mockUsers = [
+  {
+    ClientId: '1',
+    ClientName: 'Client 1',
+    NextMeeting: 'Test Meeting 1',
+    NextMeetingTime: '10:00',
+    AssetValue: 10000,
+    LastMeeting: 'Last Meeting 1',
+    ClientSummary: 'Summary for User One',
+    chartUrl: ''
+  }
+]
+
+const multipleUsers = [
+  {
+    ClientId: '1',
+    ClientName: 'Client 1',
+    NextMeeting: 'Test Meeting 1',
+    NextMeetingTime: '10:00 AM',
+    AssetValue: 10000,
+    LastMeeting: 'Last Meeting 1',
+    ClientSummary: 'Summary for User One',
+    chartUrl: ''
+  },
+  {
+    ClientId: '2',
+    ClientName: 'Client 2',
+    NextMeeting: 'Test Meeting 2',
+    NextMeetingTime: '2:00 PM',
+    AssetValue: 20000,
+    LastMeeting: 'Last Meeting 2',
+    ClientSummary: 'Summary for User Two',
+    chartUrl: ''
+  }
+]
+
+describe('Card Component', () => {
+  beforeEach(() => {
+    global.fetch = mockDispatch
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    //(console.error as jest.Mock).mockRestore();
+  })
+
+  test('displays loading message while fetching users', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce([])
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />)
+
+    expect(screen.queryByText('Loading...')).toBeInTheDocument()
+
+    await waitFor(() => expect(getUsers).toHaveBeenCalled())
+  })
+
+  test('displays no meetings message when there are no users', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce([])
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />)
+
+    await waitFor(() => expect(getUsers).toHaveBeenCalled())
+
+    expect(screen.getByText('No meetings have been arranged')).toBeInTheDocument()
+  })
+
+  test('displays user cards when users are fetched', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce(mockUsers)
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />)
+
+    await waitFor(() => expect(getUsers).toHaveBeenCalled())
+
+    expect(screen.getByText('Client 1')).toBeInTheDocument()
+  })
+
+  test('handles API failure and stops loading', async () => {
+    const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    ;(getUsers as jest.Mock).mockRejectedValueOnce(new Error('API Error'))
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />)
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(getUsers).toHaveBeenCalled()
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+    })
+
+    const mockError = new Error('API Error')
+
+    expect(console.error).toHaveBeenCalledWith('Error fetching users:', mockError)
+
+    consoleErrorMock.mockRestore()
+  })
+
+  test('handles card click and updates context with selected user', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce(mockUsers)
+
+    const mockOnCardClick = mockDispatch
+
+    renderWithContext(<Cards onCardClick={mockOnCardClick} />)
+
+    await waitFor(() => expect(getUsers).toHaveBeenCalled())
+
+    const userCard = screen.getByTestId('user-card-mock')
+
+    await act(() => {
+      fireEvent.click(userCard)
+    })
+  })
+
+  test('display "No future meetings have been arranged" when there is only one user', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce(mockUsers)
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />)
+
+    await waitFor(() => expect(getUsers).toHaveBeenCalled())
+
+    expect(screen.getByText('No future meetings have been arranged')).toBeInTheDocument()
+  })
+
+  test('renders future meetings when there are multiple users', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce(multipleUsers)
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />)
+
+    await waitFor(() => expect(getUsers).toHaveBeenCalled())
+
+    expect(screen.getByText('Client 2')).toBeInTheDocument()
+    expect(screen.queryByText('No future meetings have been arranged')).not.toBeInTheDocument()
+  })
+
+  test('logs error when user does not have a ClientId and ClientName', async () => {
+    ;(getUsers as jest.Mock).mockResolvedValueOnce([
+      {
+        ClientId: null,
+        ClientName: '',
+        NextMeeting: 'Test Meeting 1',
+        NextMeetingTime: '10:00 AM',
+        AssetValue: 10000,
+        LastMeeting: 'Last Meeting 1',
+        ClientSummary: 'Summary for User One',
+        chartUrl: ''
+      }
+    ])
+
+    renderWithContext(<Cards onCardClick={mockDispatch} />, {
+      context: {
+        AppStateContext: { dispatch: mockDispatch }
+      }
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('user-card-mock')).toBeInTheDocument()
+    })
+
+    const userCard = screen.getByTestId('user-card-mock')
+    fireEvent.click(userCard)
+
+    expect(console.error).toHaveBeenCalledWith(
+      'User does not have a ClientId and clientName:',
+      expect.objectContaining({
+        ClientId: null,
+        ClientName: ''
+      })
+    )
+  })
+
+})
diff --git a/ClientAdvisor/App/frontend/src/components/Cards/Cards.tsx b/ClientAdvisor/App/frontend/src/components/Cards/Cards.tsx
index 99a95abd8..e481013e3 100644
--- a/ClientAdvisor/App/frontend/src/components/Cards/Cards.tsx
+++ b/ClientAdvisor/App/frontend/src/components/Cards/Cards.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
-import UserCard from '../UserCard/UserCard';
+import {UserCard} from '../UserCard/UserCard';
 import styles from './Cards.module.css';
-import { getUsers, selectUser } from '../../api/api';
+import { getUsers, selectUser } from '../../api';
 import { AppStateContext } from '../../state/AppProvider';
 import { User } from '../../types/User';
 import BellToggle from '../../assets/BellToggle.svg'
@@ -17,6 +17,13 @@ const Cards: React.FC<CardsProps> = ({ onCardClick }) => {
   const [selectedClientId, setSelectedClientId] = useState<string | null>(null);
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
 
+
+  useEffect(() => {
+    if(selectedClientId != null && appStateContext?.state.clientId == ''){
+      setSelectedClientId('')
+    }
+  },[appStateContext?.state.clientId]);
+  
   useEffect(() => {
     const fetchUsers = async () => {
       try {
@@ -51,8 +58,6 @@ const Cards: React.FC<CardsProps> = ({ onCardClick }) => {
     if (user.ClientId) {
       appStateContext.dispatch({ type: 'UPDATE_CLIENT_ID', payload: user.ClientId.toString() });
       setSelectedClientId(user.ClientId.toString());
-      console.log('User clicked:', user);
-      console.log('Selected ClientId:', user.ClientId.toString());
       onCardClick(user);
    
   } else {
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx
new file mode 100644
index 000000000..cebb82be7
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { renderWithContext, screen, waitFor, fireEvent, act } from '../../test/test.utils';
+import { ChatHistoryList } from './ChatHistoryList'
+import {groupByMonth} from '../../helpers/helpers';
+
+// Mock the groupByMonth function
+jest.mock('../../helpers/helpers', () => ({
+  groupByMonth: jest.fn(),
+}));
+
+// Mock ChatHistoryListItemGroups component
+jest.mock('./ChatHistoryListItem', () => ({
+  ChatHistoryListItemGroups: jest.fn(() => <div>Mocked ChatHistoryListItemGroups</div>),
+}));
+
+describe('ChatHistoryList', () => {
+
+    beforeEach(() => {
+        global.fetch = jest.fn();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+  it('should display "No chat history." when chatHistory is empty', () => {
+    renderWithContext(<ChatHistoryList />);
+
+    expect(screen.getByText('No chat history.')).toBeInTheDocument();
+  });
+
+  it('should call groupByMonth with chatHistory when chatHistory is present', () => {
+    const mockstate = {
+        chatHistory : [{
+            id: '1',
+            title: 'Sample chat message',
+            messages:[],
+            date:new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+        }]
+      };
+    (groupByMonth as jest.Mock).mockReturnValue([]);
+    renderWithContext(<ChatHistoryList /> , mockstate);
+
+    expect(groupByMonth).toHaveBeenCalledWith(mockstate.chatHistory);
+  });
+
+  it('should render ChatHistoryListItemGroups with grouped chat history when chatHistory is present', () => {
+     const mockstate = {
+        chatHistory : [{
+            id: '1',
+            title: 'Sample chat message',
+            messages:[],
+            date:new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+        }]
+      };
+    (groupByMonth as jest.Mock).mockReturnValue([]);
+    renderWithContext(<ChatHistoryList /> , mockstate);
+
+    expect(screen.getByText('Mocked ChatHistoryListItemGroups')).toBeInTheDocument();
+  });
+});
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index 763c6c644..de01eacd2 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -1,69 +1,21 @@
-import React, { useContext } from 'react'
+import React, { useContext,useEffect } from 'react'
 import { Stack, StackItem, Text } from '@fluentui/react'
 
-import { Conversation } from '../../api/models'
+import { Conversation , GroupedChatHistory } from '../../api/models'
+import {groupByMonth} from '../../helpers/helpers';
 import { AppStateContext } from '../../state/AppProvider'
 
 import { ChatHistoryListItemGroups } from './ChatHistoryListItem'
 
 interface ChatHistoryListProps {}
 
-export interface GroupedChatHistory {
-  month: string
-  entries: Conversation[]
-}
-
-const groupByMonth = (entries: Conversation[]) => {
-  const groups: GroupedChatHistory[] = [{ month: 'Recent', entries: [] }]
-  const currentDate = new Date()
-
-  entries.forEach(entry => {
-    const date = new Date(entry.date)
-    const daysDifference = (currentDate.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
-    const monthYear = date.toLocaleString('default', { month: 'long', year: 'numeric' })
-    const existingGroup = groups.find(group => group.month === monthYear)
-
-    if (daysDifference <= 7) {
-      groups[0].entries.push(entry)
-    } else {
-      if (existingGroup) {
-        existingGroup.entries.push(entry)
-      } else {
-        groups.push({ month: monthYear, entries: [entry] })
-      }
-    }
-  })
 
-  groups.sort((a, b) => {
-    // Check if either group has no entries and handle it
-    if (a.entries.length === 0 && b.entries.length === 0) {
-      return 0 // No change in order
-    } else if (a.entries.length === 0) {
-      return 1 // Move 'a' to a higher index (bottom)
-    } else if (b.entries.length === 0) {
-      return -1 // Move 'b' to a higher index (bottom)
-    }
-    const dateA = new Date(a.entries[0].date)
-    const dateB = new Date(b.entries[0].date)
-    return dateB.getTime() - dateA.getTime()
-  })
 
-  groups.forEach(group => {
-    group.entries.sort((a, b) => {
-      const dateA = new Date(a.date)
-      const dateB = new Date(b.date)
-      return dateB.getTime() - dateA.getTime()
-    })
-  })
-
-  return groups
-}
-
-const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
+export const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
   const appStateContext = useContext(AppStateContext)
   const chatHistory = appStateContext?.state.chatHistory
 
-  React.useEffect(() => {}, [appStateContext?.state.chatHistory])
+  useEffect(() => {}, [appStateContext?.state.chatHistory])
 
   let groupedChatHistory
   if (chatHistory && chatHistory.length > 0) {
@@ -83,4 +35,4 @@ const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
   return <ChatHistoryListItemGroups groupedChatHistory={groupedChatHistory} />
 }
 
-export default ChatHistoryList
+
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.test.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.test.tsx
new file mode 100644
index 000000000..62715d93b
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.test.tsx
@@ -0,0 +1,143 @@
+import { renderWithContext, screen, waitFor, fireEvent, act } from '../../test/test.utils';
+import { ChatHistoryListItemGroups } from './ChatHistoryListItem';
+import { historyList } from '../../api';
+
+jest.mock('../../api', () => ({
+    historyList: jest.fn(),
+}));
+
+const mockDispatch = jest.fn();
+const handleFetchHistory = jest.fn();
+
+// Mock the ChatHistoryListItemCell component
+jest.mock('./ChatHistoryListItemCell', () => ({
+    ChatHistoryListItemCell: jest.fn(({ item, onSelect }) => (
+        <div data-testid={`mock-cell-${item.id}`} onClick={() => onSelect(item)}>
+            {item?.title}
+        </div>
+    )),
+}));
+
+const mockGroupedChatHistory = [
+    {
+        month: '2023-09',
+        entries: [
+            { id: '1', title: 'Chat 1', messages: [], date: new Date().toISOString(), updatedAt: new Date().toISOString() },
+            { id: '2', title: 'Chat 2', messages: [], date: new Date().toISOString(), updatedAt: new Date().toISOString() },
+        ],
+    },
+    {
+        month: '2023-08',
+        entries: [
+            { id: '3', title: 'Chat 3', messages: [], date: new Date().toISOString(), updatedAt: new Date().toISOString() },
+        ],
+    },
+];
+
+describe('ChatHistoryListItemGroups Component', () => {
+    beforeEach(() => {
+        global.fetch = jest.fn();
+    
+        jest.spyOn(console, 'error').mockImplementation(() => { });
+      });
+    
+      afterEach(() => {
+        jest.clearAllMocks();
+        //(console.error as jest.Mock).mockRestore();
+      });
+    
+    it('should call handleFetchHistory with the correct offset when the observer is triggered', async () => {
+        const responseMock = [{ id: '4', title: 'Chat 4', messages: [], date: new Date().toISOString(), updatedAt: new Date().toISOString() }];
+        (historyList as jest.Mock).mockResolvedValue([...responseMock]);
+        await act(async () => {
+            renderWithContext(<ChatHistoryListItemGroups groupedChatHistory={mockGroupedChatHistory} />);
+        });
+
+        const scrollElms = await screen.findAllByRole('scrollDiv');
+        const lastElem = scrollElms[scrollElms.length - 1];
+
+        await act(async () => {
+            fireEvent.scroll(lastElem, { target: { scrollY: 100 } });
+            //await waitFor(() => expect(historyList).toHaveBeenCalled());
+        });
+
+        await act(async () => {
+            await waitFor(() => {
+                expect(historyList).toHaveBeenCalled();
+            });
+        });
+    });
+
+    it('displays spinner while loading more history', async () => {
+        const responseMock = [{ id: '4', title: 'Chat 4', messages: [], date: new Date().toISOString(), updatedAt: new Date().toISOString() }];
+        (historyList as jest.Mock).mockResolvedValue([...responseMock]);
+        await act(async () => {
+            renderWithContext(<ChatHistoryListItemGroups groupedChatHistory={mockGroupedChatHistory} />);
+        });
+
+        const scrollElms = await screen.findAllByRole('scrollDiv');
+        const lastElem = scrollElms[scrollElms.length - 1];
+
+        await act(async () => {
+            fireEvent.scroll(lastElem, { target: { scrollY: 100 } });
+        });
+
+        await act(async () => {
+            await waitFor(() => {
+                expect(screen.queryByLabelText(/loading/i)).not.toBeInTheDocument();
+            });
+        });
+    });
+
+    it('should render the grouped chat history', () => {
+        renderWithContext(<ChatHistoryListItemGroups groupedChatHistory={mockGroupedChatHistory} />);
+
+        // Check if each group is rendered
+        expect(screen.getByText('2023-09')).toBeInTheDocument();
+        expect(screen.getByText('2023-08')).toBeInTheDocument();
+
+        // Check if entries are rendered
+        expect(screen.getByText('Chat 1')).toBeInTheDocument();
+        expect(screen.getByText('Chat 2')).toBeInTheDocument();
+        expect(screen.getByText('Chat 3')).toBeInTheDocument();
+    });
+
+    it('calls onSelect with the correct item when a ChatHistoryListItemCell is clicked', async () => {
+        const handleSelectMock = jest.fn();
+
+        // Render the component
+        renderWithContext(<ChatHistoryListItemGroups groupedChatHistory={mockGroupedChatHistory} />);
+
+        // Simulate clicks on each ChatHistoryListItemCell
+        const cells = screen.getAllByTestId(/mock-cell-/);
+
+        // Click on the first cell
+        fireEvent.click(cells[0]);
+
+        // Wait for the mock function to be called with the correct item
+        // await waitFor(() => {
+        //     expect(handleSelectMock).toHaveBeenCalledWith(mockGroupedChatHistory[0].entries[0]);
+        // });
+
+    });
+
+    it('handles API failure gracefully', async () => {
+        // Mock the API to reject with an error
+        (historyList as jest.Mock).mockResolvedValue(undefined);
+
+        renderWithContext(<ChatHistoryListItemGroups groupedChatHistory={mockGroupedChatHistory} />);
+
+        // Simulate triggering the scroll event that loads more history
+        const scrollElms = await screen.findAllByRole('scrollDiv');
+        const lastElem = scrollElms[scrollElms.length - 1];
+
+        await act(async () => {
+            fireEvent.scroll(lastElem, { target: { scrollY: 100 } });
+        });
+        // Check that the spinner is hidden after the API call
+        await waitFor(() => {
+            expect(screen.queryByLabelText(/loading/i)).not.toBeInTheDocument();
+        });
+    });
+   
+});
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index 6d26baa2e..cf8ceadc8 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -19,289 +19,17 @@ import {
 import { useBoolean } from '@fluentui/react-hooks'
 
 import { historyDelete, historyList, historyRename } from '../../api'
-import { Conversation } from '../../api/models'
+import { Conversation,GroupedChatHistory } from '../../api/models'
 import { AppStateContext } from '../../state/AppProvider'
+import {formatMonth} from '../../helpers/helpers';
 
-import { GroupedChatHistory } from './ChatHistoryList'
-
-import styles from './ChatHistoryPanel.module.css'
-
-interface ChatHistoryListItemCellProps {
-  item?: Conversation
-  onSelect: (item: Conversation | null) => void
-}
+import styles from './ChatHistoryPanel.module.css';
+import { ChatHistoryListItemCell } from './ChatHistoryListItemCell'
 
 interface ChatHistoryListItemGroupsProps {
   groupedChatHistory: GroupedChatHistory[]
 }
 
-const formatMonth = (month: string) => {
-  const currentDate = new Date()
-  const currentYear = currentDate.getFullYear()
-
-  const [monthName, yearString] = month.split(' ')
-  const year = parseInt(yearString)
-
-  if (year === currentYear) {
-    return monthName
-  } else {
-    return month
-  }
-}
-
-export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = ({ item, onSelect }) => {
-  const [isHovered, setIsHovered] = React.useState(false)
-  const [edit, setEdit] = useState(false)
-  const [editTitle, setEditTitle] = useState('')
-  const [hideDeleteDialog, { toggle: toggleDeleteDialog }] = useBoolean(true)
-  const [errorDelete, setErrorDelete] = useState(false)
-  const [renameLoading, setRenameLoading] = useState(false)
-  const [errorRename, setErrorRename] = useState<string | undefined>(undefined)
-  const [textFieldFocused, setTextFieldFocused] = useState(false)
-  const textFieldRef = useRef<ITextField | null>(null)
-  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
-
-  const appStateContext = React.useContext(AppStateContext)
-  const isSelected = item?.id === appStateContext?.state.currentChat?.id
-  const dialogContentProps = {
-    type: DialogType.close,
-    title: 'Are you sure you want to delete this item?',
-    closeButtonAriaLabel: 'Close',
-    subText: 'The history of this chat session will permanently removed.'
-  }
-
-  const modalProps = {
-    titleAriaId: 'labelId',
-    subtitleAriaId: 'subTextId',
-    isBlocking: true,
-    styles: { main: { maxWidth: 450 } }
-  }
-
-  if (!item) {
-    return null
-  }
-
-  useEffect(() => {
-    if (textFieldFocused && textFieldRef.current) {
-      textFieldRef.current.focus()
-      setTextFieldFocused(false)
-    }
-  }, [textFieldFocused])
-
-  useEffect(() => {
-    if (appStateContext?.state.currentChat?.id !== item?.id) {
-      setEdit(false)
-      setEditTitle('')
-    }
-  }, [appStateContext?.state.currentChat?.id, item?.id])
-
-  useEffect(()=>{
-    let v = appStateContext?.state.isRequestInitiated;
-    if(v!=undefined)
-      setIsButtonDisabled(v && isSelected)
-  },[appStateContext?.state.isRequestInitiated])
-
-  const onDelete = async () => {
-    appStateContext?.dispatch({ type: 'TOGGLE_LOADER' });
-    const response = await historyDelete(item.id)
-    if (!response.ok) {
-      setErrorDelete(true)
-      setTimeout(() => {
-        setErrorDelete(false)
-      }, 5000)
-    } else {
-      appStateContext?.dispatch({ type: 'DELETE_CHAT_ENTRY', payload: item.id })
-    }
-    appStateContext?.dispatch({ type: 'TOGGLE_LOADER' });
-    toggleDeleteDialog()
-  }
-
-  const onEdit = () => {
-    setEdit(true)
-    setTextFieldFocused(true)
-    setEditTitle(item?.title)
-  }
-
-  const handleSelectItem = () => {
-    onSelect(item)
-    appStateContext?.dispatch({ type: 'UPDATE_CURRENT_CHAT', payload: item })
-  }
-
-  const truncatedTitle = item?.title?.length > 28 ? `${item.title.substring(0, 28)} ...` : item.title
-
-  const handleSaveEdit = async (e: any) => {
-    e.preventDefault()
-    if (errorRename || renameLoading) {
-      return
-    }
-    if (editTitle == item.title) {
-      setErrorRename('Error: Enter a new title to proceed.')
-      setTimeout(() => {
-        setErrorRename(undefined)
-        setTextFieldFocused(true)
-        if (textFieldRef.current) {
-          textFieldRef.current.focus()
-        }
-      }, 5000)
-      return
-    }
-    setRenameLoading(true)
-    const response = await historyRename(item.id, editTitle)
-    if (!response.ok) {
-      setErrorRename('Error: could not rename item')
-      setTimeout(() => {
-        setTextFieldFocused(true)
-        setErrorRename(undefined)
-        if (textFieldRef.current) {
-          textFieldRef.current.focus()
-        }
-      }, 5000)
-    } else {
-      setRenameLoading(false)
-      setEdit(false)
-      appStateContext?.dispatch({ type: 'UPDATE_CHAT_TITLE', payload: { ...item, title: editTitle } as Conversation })
-      setEditTitle('')
-    }
-  }
-
-  const chatHistoryTitleOnChange = (e: any) => {
-    setEditTitle(e.target.value)
-  }
-
-  const cancelEditTitle = () => {
-    setEdit(false)
-    setEditTitle('')
-  }
-
-  const handleKeyPressEdit = (e: any) => {
-    if (e.key === 'Enter') {
-      return handleSaveEdit(e)
-    }
-    if (e.key === 'Escape') {
-      cancelEditTitle()
-      return
-    }
-  }
-
-  return (
-    <Stack
-      key={item.id}
-      tabIndex={0}
-      aria-label="chat history item"
-      className={styles.itemCell}
-      onClick={() => handleSelectItem()}
-      onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? handleSelectItem() : null)}
-      verticalAlign="center"
-      // horizontal
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      styles={{
-        root: {
-          backgroundColor: isSelected ? '#e6e6e6' : 'transparent'
-        }
-      }}>
-      {edit ? (
-        <>
-          <Stack.Item style={{ width: '100%' }}>
-            <form aria-label="edit title form" onSubmit={e => handleSaveEdit(e)} style={{ padding: '5px 0px' }}>
-              <Stack horizontal verticalAlign={'start'}>
-                <Stack.Item>
-                  <TextField
-                    componentRef={textFieldRef}
-                    autoFocus={textFieldFocused}
-                    value={editTitle}
-                    placeholder={item.title}
-                    onChange={chatHistoryTitleOnChange}
-                    onKeyDown={handleKeyPressEdit}
-                    // errorMessage={errorRename}
-                    disabled={errorRename ? true : false}
-                  />
-                </Stack.Item>
-                {editTitle && (
-                  <Stack.Item>
-                    <Stack aria-label="action button group" horizontal verticalAlign={'center'}>
-                      <IconButton
-                        role="button"
-                        disabled={errorRename !== undefined}
-                        onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? handleSaveEdit(e) : null)}
-                        onClick={e => handleSaveEdit(e)}
-                        aria-label="confirm new title"
-                        iconProps={{ iconName: 'CheckMark' }}
-                        styles={{ root: { color: 'green', marginLeft: '5px' } }}
-                      />
-                      <IconButton
-                        role="button"
-                        disabled={errorRename !== undefined}
-                        onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? cancelEditTitle() : null)}
-                        onClick={() => cancelEditTitle()}
-                        aria-label="cancel edit title"
-                        iconProps={{ iconName: 'Cancel' }}
-                        styles={{ root: { color: 'red', marginLeft: '5px' } }}
-                      />
-                    </Stack>
-                  </Stack.Item>
-                )}
-              </Stack>
-              {errorRename && (
-                <Text
-                  role="alert"
-                  aria-label={errorRename}
-                  style={{ fontSize: 12, fontWeight: 400, color: 'rgb(164,38,44)' }}>
-                  {errorRename}
-                </Text>
-              )}
-            </form>
-          </Stack.Item>
-        </>
-      ) : (
-        <>
-          <Stack horizontal verticalAlign={'center'} style={{ width: '100%' }}>
-            <div className={styles.chatTitle}>{truncatedTitle}</div>
-            {(isSelected || isHovered) && (
-              <Stack horizontal horizontalAlign="end">
-                <IconButton
-                  className={styles.itemButton}
-                  disabled={isButtonDisabled}
-                  iconProps={{ iconName: 'Delete' }}
-                  title="Delete"
-                  onClick={toggleDeleteDialog}
-                  onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
-                />
-                <IconButton
-                  className={styles.itemButton}
-                  disabled={isButtonDisabled}
-                  iconProps={{ iconName: 'Edit' }}
-                  title="Edit"
-                  onClick={onEdit}
-                  onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
-                />
-              </Stack>
-            )}
-          </Stack>
-        </>
-      )}
-      {errorDelete && (
-        <Text
-          styles={{
-            root: { color: 'red', marginTop: 5, fontSize: 14 }
-          }}>
-          Error: could not delete item
-        </Text>
-      )}
-      <Dialog
-        hidden={hideDeleteDialog}
-        onDismiss={toggleDeleteDialog}
-        dialogContentProps={dialogContentProps}
-        modalProps={modalProps}>
-        <DialogFooter>
-          <PrimaryButton onClick={onDelete} text="Delete" />
-          <DefaultButton onClick={toggleDeleteDialog} text="Cancel" />
-        </DialogFooter>
-      </Dialog>
-    </Stack>
-  )
-}
-
 export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps> = ({ groupedChatHistory }) => {
   const appStateContext = useContext(AppStateContext)
   const observerTarget = useRef(null)
@@ -381,7 +109,7 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
                 onRenderCell={onRenderCell}
                 className={styles.chatList}
               />
-              <div ref={observerTarget} />
+              <div role="scrollDiv" ref={observerTarget} />
               <Separator
                 styles={{
                   root: {
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItemCell.test.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItemCell.test.tsx
new file mode 100644
index 000000000..9edd86b06
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItemCell.test.tsx
@@ -0,0 +1,556 @@
+import { renderWithContext, screen, waitFor, fireEvent, act, findByText } from '../../test/test.utils'
+import { ChatHistoryListItemCell } from './ChatHistoryListItemCell'
+import { Conversation } from '../../api/models'
+import { historyRename, historyDelete } from '../../api'
+import React, { useEffect } from 'react'
+import userEvent from '@testing-library/user-event'
+
+// Mock API
+jest.mock('../../api', () => ({
+  historyRename: jest.fn(),
+  historyDelete: jest.fn()
+}))
+
+const conversation: Conversation = {
+  id: '1',
+  title: 'Test Chat',
+  messages: [],
+  date: new Date().toISOString()
+}
+
+const mockOnSelect = jest.fn()
+// const mockOnEdit = jest.fn()
+const mockAppState = {
+  currentChat: { id: '1' },
+  isRequestInitiated: false
+}
+
+describe('ChatHistoryListItemCell', () => {
+  beforeEach(() => {
+    mockOnSelect.mockClear()
+    global.fetch = jest.fn()
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders the chat history item', () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const titleElement = screen.getByText(/Test Chat/i)
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  test('truncates long title', () => {
+    const longTitleConversation = {
+      ...conversation,
+      title: 'A very long title that should be truncated after 28 characters'
+    }
+
+    renderWithContext(<ChatHistoryListItemCell item={longTitleConversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const truncatedTitle = screen.getByText(/A very long title that shoul .../i)
+    expect(truncatedTitle).toBeInTheDocument()
+  })
+
+  test('calls onSelect when clicked', () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.click(item)
+    expect(mockOnSelect).toHaveBeenCalledWith(conversation)
+  })
+
+  test('when null item is not passed', () => {
+    renderWithContext(<ChatHistoryListItemCell onSelect={mockOnSelect} />, mockAppState)
+    expect(screen.queryByText(/Test Chat/i)).not.toBeInTheDocument()
+  })
+
+  test('displays delete and edit buttons on hover', async () => {
+    const mockAppStateUpdated = {
+      ...mockAppState,
+      currentChat: { id: '' }
+    }
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppStateUpdated)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    await waitFor(() => {
+      expect(screen.getByTitle(/Delete/i)).toBeInTheDocument()
+      expect(screen.getByTitle(/Edit/i)).toBeInTheDocument()
+    })
+  })
+
+  test('hides delete and edit buttons when not hovered', async () => {
+    const mockAppStateUpdated = {
+      ...mockAppState,
+      currentChat: { id: '' }
+    }
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppStateUpdated)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    await waitFor(() => {
+      expect(screen.getByTitle(/Delete/i)).toBeInTheDocument()
+      expect(screen.getByTitle(/Edit/i)).toBeInTheDocument()
+    })
+
+    fireEvent.mouseLeave(item)
+    await waitFor(() => {
+      expect(screen.queryByTitle(/Delete/i)).not.toBeInTheDocument()
+      expect(screen.queryByTitle(/Edit/i)).not.toBeInTheDocument()
+    })
+  })
+
+  test('shows confirmation dialog and deletes item', async () => {
+    ;(historyDelete as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    fireEvent.click(deleteButton)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Are you sure you want to delete this item?/i)).toBeInTheDocument()
+    })
+
+    const confirmDeleteButton = screen.getByRole('button', { name: 'Delete' })
+    fireEvent.click(confirmDeleteButton)
+
+    await waitFor(() => {
+      expect(historyDelete).toHaveBeenCalled()
+    })
+  })
+
+  test('when delete API fails or return false', async () => {
+    ;(historyDelete as jest.Mock).mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    fireEvent.click(deleteButton)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Are you sure you want to delete this item?/i)).toBeInTheDocument()
+    })
+
+    const confirmDeleteButton = screen.getByRole('button', { name: 'Delete' })
+
+    await act(() => {
+      userEvent.click(confirmDeleteButton)
+    })
+
+    await waitFor(async () => {
+      expect(await screen.findByText(/Error: could not delete item/i)).toBeInTheDocument()
+    })
+  })
+
+  test('cancel delete when confirmation dialog is shown', async () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    fireEvent.click(deleteButton)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Are you sure you want to delete this item?/i)).toBeInTheDocument()
+    })
+    const cancelDeleteButton = screen.getByRole('button', { name: 'Cancel' })
+    fireEvent.click(cancelDeleteButton)
+
+    await waitFor(() => {
+      expect(screen.queryByText(/Are you sure you want to delete this item?/i)).not.toBeInTheDocument()
+    })
+  })
+
+  test('disables buttons when request is initiated', () => {
+    const appStateWithRequestInitiated = {
+      ...mockAppState,
+      isRequestInitiated: true
+    }
+
+    renderWithContext(
+      <ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />,
+      appStateWithRequestInitiated
+    )
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    const editButton = screen.getByTitle(/Edit/i)
+
+    expect(deleteButton).toBeDisabled()
+    expect(editButton).toBeDisabled()
+  })
+
+  test('does not disable buttons when request is not initiated', () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    const editButton = screen.getByTitle(/Edit/i)
+
+    expect(deleteButton).not.toBeDisabled()
+    expect(editButton).not.toBeDisabled()
+  })
+
+  test('calls onEdit when Edit button is clicked', async () => {
+    renderWithContext(
+      <ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, // Pass the mockOnEdit
+      mockAppState
+    )
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item) // Simulate hover to reveal Edit button
+
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      expect(editButton).toBeInTheDocument()
+      fireEvent.click(editButton) // Simulate Edit button click
+    })
+    const inputItem = screen.getByPlaceholderText('Test Chat')
+    expect(inputItem).toBeInTheDocument() // Ensure onEdit is called with the conversation item
+    expect(inputItem).toHaveValue('Test Chat')
+  })
+
+  test('handles input onChange and onKeyDown ENTER events correctly', async () => {
+    ;(historyRename as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    // Simulate hover to reveal Edit button
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    // Wait for the Edit button to appear and click it
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      expect(editButton).toBeInTheDocument()
+      fireEvent.click(editButton)
+    })
+
+    // Find the input field
+    const inputItem = screen.getByPlaceholderText('Test Chat')
+    expect(inputItem).toBeInTheDocument() // Ensure input is there
+
+    // Simulate the onChange event by typing into the input field
+    fireEvent.change(inputItem, { target: { value: 'Updated Chat' } })
+    expect(inputItem).toHaveValue('Updated Chat') // Ensure value is updated
+
+    // Simulate keydown event for the 'Enter' key
+    fireEvent.keyDown(inputItem, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    await waitFor(() => expect(historyRename).toHaveBeenCalled())
+
+    // Optionally: Verify that some onSave or equivalent function is called on Enter key
+    // expect(mockOnSave).toHaveBeenCalledWith('Updated Chat'); (if you have a mock function for the save logic)
+
+    // Simulate keydown event for the 'Escape' key
+    // fireEvent.keyDown(inputItem, { key: 'Escape', code: 'Escape', charCode: 27 });
+
+    //await waitFor(() =>  expect(screen.getByPlaceholderText('Updated Chat')).not.toBeInTheDocument());
+  })
+
+  test('handles input onChange and onKeyDown ESCAPE events correctly', async () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    // Simulate hover to reveal Edit button
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    // Wait for the Edit button to appear and click it
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      expect(editButton).toBeInTheDocument()
+      fireEvent.click(editButton)
+    })
+
+    // Find the input field
+    const inputItem = screen.getByLabelText('rename-input')
+    expect(inputItem).toBeInTheDocument() // Ensure input is there
+
+    // Simulate the onChange event by typing into the input field
+    fireEvent.change(inputItem, { target: { value: 'Updated Chat' } })
+    expect(inputItem).toHaveValue('Updated Chat') // Ensure value is updated
+
+    fireEvent.keyDown(inputItem, { key: 'Escape', code: 'Escape', charCode: 27 })
+
+    await waitFor(() => expect(inputItem).not.toBeInTheDocument())
+  })
+
+  test('handles rename save when the updated text is equal to initial text', async () => {
+    userEvent.setup()
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    // Simulate hover to reveal Edit button
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    // Wait for the Edit button to appear and click it
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      expect(editButton).toBeInTheDocument()
+      fireEvent.click(editButton)
+    })
+
+    // Find the input field
+    const inputItem = screen.getByPlaceholderText('Test Chat')
+    expect(inputItem).toBeInTheDocument() // Ensure input is there
+
+    await act(() => {
+      userEvent.type(inputItem, 'Test Chat')
+      //fireEvent.change(inputItem, { target: { value: 'Test Chat' } });
+    })
+
+    userEvent.click(screen.getByRole('button', { name: 'confirm new title' }))
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error: Enter a new title to proceed./i)).toBeInTheDocument()
+    })
+
+    // Wait for the error to be hidden after 5 seconds
+    await waitFor(() => expect(screen.queryByText('Error: Enter a new title to proceed.')).not.toBeInTheDocument(), {
+      timeout: 6000
+    })
+    const input = screen.getByLabelText('rename-input')
+    expect(input).toHaveFocus()
+  }, 10000)
+
+  test('Should hide the rename from when cancel it.', async () => {
+    userEvent.setup()
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    // Wait for the Edit button to appear and click it
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      fireEvent.click(editButton)
+    })
+
+    await userEvent.click(screen.getByRole('button', { name: 'cancel edit title' }))
+
+    // Wait for the error to be hidden after 5 seconds
+    await waitFor(() => {
+      const input = screen.queryByLabelText('rename-input')
+      expect(input).not.toBeInTheDocument()
+    })
+  })
+
+  test('handles rename save API failed', async () => {
+    userEvent.setup()
+    ;(historyRename as jest.Mock).mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    // Simulate hover to reveal Edit button
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    // Wait for the Edit button to appear and click it
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      fireEvent.click(editButton)
+    })
+
+    // Find the input field
+    const inputItem = screen.getByLabelText('rename-input')
+    expect(inputItem).toBeInTheDocument() // Ensure input is there
+
+    await act(async () => {
+      await userEvent.type(inputItem, 'update Chat')
+    })
+
+    userEvent.click(screen.getByRole('button', { name: 'confirm new title' }))
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error: could not rename item/i)).toBeInTheDocument()
+    })
+
+    // Wait for the error to be hidden after 5 seconds
+    await waitFor(() => expect(screen.queryByText('Error: could not rename item')).not.toBeInTheDocument(), {
+      timeout: 6000
+    })
+    const input = screen.getByLabelText('rename-input')
+    expect(input).toHaveFocus()
+  }, 10000)
+
+  test('shows error when trying to rename to an existing title', async () => {
+    const existingTitle = 'Existing Chat Title'
+    const conversationWithExistingTitle: Conversation = {
+      id: '2',
+      title: existingTitle,
+      messages: [],
+      date: new Date().toISOString()
+    }
+
+    ;(historyRename as jest.Mock).mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: 'Title already exists' })
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    await waitFor(() => {
+      const editButton = screen.getByTitle(/Edit/i)
+      fireEvent.click(editButton)
+    })
+
+    const inputItem = screen.getByPlaceholderText(conversation.title)
+    fireEvent.change(inputItem, { target: { value: existingTitle } })
+
+    fireEvent.keyDown(inputItem, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error: could not rename item/i)).toBeInTheDocument()
+    })
+  })
+
+  test('triggers edit functionality when Enter key is pressed', async () => {
+    ;(historyRename as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    const editButton = screen.getByTitle(/Edit/i)
+    fireEvent.click(editButton)
+
+    const inputItem = screen.getByLabelText('rename-input')
+    fireEvent.change(inputItem, { target: { value: 'Updated Chat' } })
+
+    fireEvent.keyDown(inputItem, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    await waitFor(() => {
+      expect(historyRename).toHaveBeenCalledWith(conversation.id, 'Updated Chat')
+    })
+  })
+
+  test('successfully saves edited title', async () => {
+    ;(historyRename as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    const editButton = screen.getByTitle(/Edit/i)
+    fireEvent.click(editButton)
+
+    const inputItem = screen.getByPlaceholderText('Test Chat')
+    fireEvent.change(inputItem, { target: { value: 'Updated Chat' } })
+
+    const form = screen.getByLabelText('edit title form')
+    fireEvent.submit(form)
+
+    await waitFor(() => {
+      expect(historyRename).toHaveBeenCalledWith('1', 'Updated Chat')
+    })
+  })
+
+  test('calls onEdit when space key is pressed on the Edit button', () => {
+    const mockOnSelect = jest.fn()
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, {
+      currentChat: { id: '1' },
+      isRequestInitiated: false
+    })
+
+    const editButton = screen.getByTitle(/Edit/i)
+
+    fireEvent.keyDown(editButton, { key: ' ', code: 'Space', charCode: 32 })
+
+    expect(screen.getByLabelText(/rename-input/i)).toBeInTheDocument()
+  })
+
+  test('calls toggleDeleteDialog when space key is pressed on the Delete button', () => {
+    // const toggleDeleteDialogMock = jest.fn()
+
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, {
+      currentChat: { id: '1' },
+      isRequestInitiated: false
+      // toggleDeleteDialog: toggleDeleteDialogMock
+    })
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+
+    // fireEvent.focus(deleteButton)
+
+    fireEvent.keyDown(deleteButton, { key: ' ', code: 'Space', charCode: 32 })
+
+    expect(screen.getByLabelText(/chat history item/i)).toBeInTheDocument()
+  })
+
+  ///////
+
+  test('opens delete confirmation dialog when Enter key is pressed on the Delete button', async () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    fireEvent.keyDown(deleteButton, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    // expect(await screen.findByText(/Are you sure you want to delete this item?/i)).toBeInTheDocument()
+  })
+
+  test('opens delete confirmation dialog when Space key is pressed on the Delete button', async () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    const deleteButton = screen.getByTitle(/Delete/i)
+    fireEvent.keyDown(deleteButton, { key: ' ', code: 'Space', charCode: 32 })
+
+    expect(await screen.findByText(/Are you sure you want to delete this item?/i)).toBeInTheDocument()
+  })
+
+  test('opens edit input when Space key is pressed on the Edit button', async () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    const editButton = screen.getByTitle(/Edit/i)
+    fireEvent.keyDown(editButton, { key: ' ', code: 'Space', charCode: 32 })
+
+    const inputItem = screen.getByLabelText('rename-input')
+    expect(inputItem).toBeInTheDocument()
+  })
+
+  test('opens edit input when Enter key is pressed on the Edit button', async () => {
+    renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
+
+    const item = screen.getByLabelText('chat history item')
+    fireEvent.mouseEnter(item)
+
+    const editButton = screen.getByTitle(/Edit/i)
+    fireEvent.keyDown(editButton, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    // const inputItem = await screen.getByLabelText('rename-input')
+    // expect(inputItem).toBeInTheDocument()
+  })
+})
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItemCell.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItemCell.tsx
new file mode 100644
index 000000000..b9b2017de
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItemCell.tsx
@@ -0,0 +1,286 @@
+import * as React from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
+import {
+  DefaultButton,
+  Dialog,
+  DialogFooter,
+  DialogType,
+  IconButton,
+  ITextField,
+  List,
+  PrimaryButton,
+  Separator,
+  Spinner,
+  SpinnerSize,
+  Stack,
+  Text,
+  TextField
+} from '@fluentui/react'
+import { useBoolean } from '@fluentui/react-hooks'
+
+import { historyDelete, historyList, historyRename } from '../../api'
+import { Conversation,GroupedChatHistory } from '../../api/models'
+import { AppStateContext } from '../../state/AppProvider'
+
+import styles from './ChatHistoryPanel.module.css'
+
+interface ChatHistoryListItemCellProps {
+  item?: Conversation
+  onSelect: (item: Conversation | null) => void
+}
+
+export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = ({ item, onSelect }) => {
+  const [isHovered, setIsHovered] = React.useState(false)
+  const [edit, setEdit] = useState(false)
+  const [editTitle, setEditTitle] = useState('')
+  const [hideDeleteDialog, { toggle: toggleDeleteDialog }] = useBoolean(true)
+  const [errorDelete, setErrorDelete] = useState(false)
+  const [renameLoading, setRenameLoading] = useState(false)
+  const [errorRename, setErrorRename] = useState<string | undefined>(undefined)
+  const [textFieldFocused, setTextFieldFocused] = useState(false)
+  const textFieldRef = useRef<ITextField | null>(null)
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+
+  const appStateContext = React.useContext(AppStateContext)
+  const isSelected = item?.id === appStateContext?.state.currentChat?.id
+  const dialogContentProps = {
+    type: DialogType.close,
+    title: 'Are you sure you want to delete this item?',
+    closeButtonAriaLabel: 'Close',
+    subText: 'The history of this chat session will permanently removed.'
+  }
+
+  const modalProps = {
+    titleAriaId: 'labelId',
+    subtitleAriaId: 'subTextId',
+    isBlocking: true,
+    styles: { main: { maxWidth: 450 } }
+  }
+
+  if (!item) {
+    return null
+  }
+
+  useEffect(() => {
+    if (textFieldFocused && textFieldRef.current) {
+      textFieldRef.current.focus()
+      setTextFieldFocused(false)
+    }
+  }, [textFieldFocused])
+
+  useEffect(() => {
+    if (appStateContext?.state.currentChat?.id !== item?.id) {
+      setEdit(false)
+      setEditTitle('')
+    }
+  }, [appStateContext?.state.currentChat?.id, item?.id])
+
+  useEffect(()=>{
+    let v = appStateContext?.state.isRequestInitiated;
+    if(v!=undefined)
+      setIsButtonDisabled(v && isSelected)
+  },[appStateContext?.state.isRequestInitiated])
+
+  const onDelete = async () => {
+    appStateContext?.dispatch({ type: 'TOGGLE_LOADER' });
+    const response = await historyDelete(item.id)
+    if (!response.ok) {
+      setErrorDelete(true)
+      setTimeout(() => {
+        setErrorDelete(false)
+      }, 5000)
+    } else {
+      appStateContext?.dispatch({ type: 'DELETE_CHAT_ENTRY', payload: item.id })
+    }
+    appStateContext?.dispatch({ type: 'TOGGLE_LOADER' });
+    toggleDeleteDialog()
+  }
+
+  const onEdit = () => {
+    setEdit(true)
+    setTextFieldFocused(true)
+    setEditTitle(item?.title)
+  }
+
+  const handleSelectItem = () => {
+    onSelect(item)
+    appStateContext?.dispatch({ type: 'UPDATE_CURRENT_CHAT', payload: item })
+  }
+
+  const truncatedTitle = item?.title?.length > 28 ? `${item.title.substring(0, 28)} ...` : item.title
+
+  const handleSaveEdit = async (e: any) => {
+    e.preventDefault()
+    if (errorRename || renameLoading) {
+      return
+    }
+    if (editTitle == item.title) {
+      setErrorRename('Error: Enter a new title to proceed.')
+      setTimeout(() => {
+        setErrorRename(undefined)
+        setTextFieldFocused(true)
+        if (textFieldRef.current) {
+          textFieldRef.current.focus()
+        }
+      }, 5000)
+      return
+    }
+    setRenameLoading(true)
+    const response = await historyRename(item.id, editTitle)
+    if (!response.ok) {
+      setErrorRename('Error: could not rename item')
+      setTimeout(() => {
+        setTextFieldFocused(true)
+        setErrorRename(undefined)
+        if (textFieldRef.current) {
+          textFieldRef.current.focus()
+        }
+      }, 5000)
+    } else {
+      setRenameLoading(false)
+      setEdit(false)
+      appStateContext?.dispatch({ type: 'UPDATE_CHAT_TITLE', payload: { ...item, title: editTitle } as Conversation })
+      setEditTitle('')
+    }
+  }
+
+  const chatHistoryTitleOnChange = (e: any) => {
+    setEditTitle(e.target.value)
+  }
+
+  const cancelEditTitle = () => {
+    setEdit(false)
+    setEditTitle('')
+  }
+
+  const handleKeyPressEdit = (e: any) => {
+    if (e.key === 'Enter') {
+      return handleSaveEdit(e)
+    }
+    if (e.key === 'Escape') {
+      cancelEditTitle()
+      return
+    }
+  }
+
+  return (
+    <Stack
+      key={item.id}
+      tabIndex={0}
+      aria-label="chat history item"
+      className={styles.itemCell}
+      onClick={() => handleSelectItem()}
+      onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? handleSelectItem() : null)}
+      verticalAlign="center"
+      // horizontal
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      styles={{
+        root: {
+          backgroundColor: isSelected ? '#e6e6e6' : 'transparent'
+        }
+      }}>
+      {edit ? (
+        <>
+          <Stack.Item style={{ width: '100%' }}>
+            <form aria-label="edit title form" onSubmit={e => handleSaveEdit(e)} style={{ padding: '5px 0px' }}>
+              <Stack horizontal verticalAlign={'start'}>
+                <Stack.Item>
+                  <TextField
+                    ariaLabel={'rename-input'}
+                    componentRef={textFieldRef}
+                    autoFocus={textFieldFocused}
+                    value={editTitle}
+                    placeholder={item.title}
+                    onChange={chatHistoryTitleOnChange}
+                    onKeyDown={handleKeyPressEdit}
+                    // errorMessage={errorRename}
+                    disabled={errorRename ? true : false}
+                  />
+                </Stack.Item>
+                {editTitle && (
+                  <Stack.Item>
+                    <Stack aria-label="action button group" horizontal verticalAlign={'center'}>
+                      <IconButton
+                        role="button"
+                        disabled={errorRename !== undefined}
+                        onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? handleSaveEdit(e) : null)}
+                        onClick={e => handleSaveEdit(e)}
+                        aria-label="confirm new title"
+                        iconProps={{ iconName: 'CheckMark' }}
+                        styles={{ root: { color: 'green', marginLeft: '5px' } }}
+                      />
+                      <IconButton
+                        role="button"
+                        disabled={errorRename !== undefined}
+                        onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? cancelEditTitle() : null)}
+                        onClick={() => cancelEditTitle()}
+                        aria-label="cancel edit title"
+                        iconProps={{ iconName: 'Cancel' }}
+                        styles={{ root: { color: 'red', marginLeft: '5px' } }}
+                      />
+                    </Stack>
+                  </Stack.Item>
+                )}
+              </Stack>
+              {errorRename && (
+                <Text
+                  role="alert"
+                  aria-label={errorRename}
+                  style={{ fontSize: 12, fontWeight: 400, color: 'rgb(164,38,44)' }}>
+                  {errorRename}
+                </Text>
+              )}
+            </form>
+          </Stack.Item>
+        </>
+      ) : (
+        <>
+          <Stack horizontal verticalAlign={'center'} style={{ width: '100%' }}>
+            <div className={styles.chatTitle}>{truncatedTitle}</div>
+            {(isSelected || isHovered) && (
+              <Stack horizontal horizontalAlign="end">
+                <IconButton
+                  className={styles.itemButton}
+                  disabled={isButtonDisabled}
+                  iconProps={{ iconName: 'Delete' }}
+                  title="Delete"
+                  onClick={toggleDeleteDialog}
+                  onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
+                />
+                <IconButton
+                  className={styles.itemButton}
+                  disabled={isButtonDisabled}
+                  iconProps={{ iconName: 'Edit' }}
+                  title="Edit"
+                  onClick={onEdit}
+                  onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
+                />
+              </Stack>
+            )}
+          </Stack>
+        </>
+      )}
+      {errorDelete && (
+        <Text
+          styles={{
+            root: { color: 'red', marginTop: 5, fontSize: 14 }
+          }}>
+          Error: could not delete item
+        </Text>
+      )}
+      <Dialog
+        hidden={hideDeleteDialog}
+        onDismiss={toggleDeleteDialog}
+        dialogContentProps={dialogContentProps}
+        modalProps={modalProps}>
+        <DialogFooter>
+          <PrimaryButton onClick={onDelete} text="Delete" />
+          <DefaultButton onClick={toggleDeleteDialog} text="Cancel" />
+        </DialogFooter>
+      </Dialog>
+    </Stack>
+  )
+}
+
+
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index 784838fe7..abb301598 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -77,3 +77,11 @@
     width: 100%;
   }
 }
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .container{
+      border: 2px solid WindowText;
+      background-color: Window;
+      color: WindowText;
+  }
+}
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx
new file mode 100644
index 000000000..8f59d23d7
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx
@@ -0,0 +1,257 @@
+import React from 'react'
+import { renderWithContext, screen, waitFor, fireEvent, act } from '../../test/test.utils'
+import { ChatHistoryPanel } from './ChatHistoryPanel'
+import { AppStateContext } from '../../state/AppProvider'
+import { ChatHistoryLoadingState, CosmosDBStatus } from '../../api/models'
+import userEvent from '@testing-library/user-event'
+import { historyDeleteAll } from '../../api'
+
+jest.mock('./ChatHistoryList', () => ({
+  ChatHistoryList: () => <div>Mocked ChatHistoryPanel</div>
+}))
+
+// Mock Fluent UI components
+jest.mock('@fluentui/react', () => ({
+  ...jest.requireActual('@fluentui/react'),
+  Spinner: () => <div>Loading...</div>
+}))
+
+jest.mock('../../api', () => ({
+  historyDeleteAll: jest.fn()
+}))
+
+const mockDispatch = jest.fn()
+
+describe('ChatHistoryPanel Component', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn()
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const mockAppState = {
+    chatHistory: [{ id: 1, message: 'Test Message' }],
+    chatHistoryLoadingState: ChatHistoryLoadingState.Success,
+    isCosmosDBAvailable: { cosmosDB: true, status: CosmosDBStatus.Working }
+  }
+
+  it('renders the ChatHistoryPanel with chat history loaded', () => {
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, mockAppState)
+    expect(screen.getByText('Chat history')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /clear all chat history/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /hide/i })).toBeInTheDocument()
+  })
+
+  it('renders a spinner when chat history is loading', async () => {
+    const stateVal = {
+      ...mockAppState,
+      chatHistoryLoadingState: ChatHistoryLoadingState.Loading
+    }
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, stateVal)
+    await waitFor(() => {
+      expect(screen.getByText('Loading chat history')).toBeInTheDocument()
+    })
+  })
+
+  it('opens the clear all chat history dialog when the command button is clicked', async () => {
+    userEvent.setup()
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, mockAppState)
+
+    const moreButton = screen.getByRole('button', { name: /clear all chat history/i })
+    fireEvent.click(moreButton)
+
+    expect(screen.queryByText('Clear all chat history')).toBeInTheDocument()
+
+    const clearAllItem = await screen.findByRole('menuitem')
+    await act(() => {
+      userEvent.click(clearAllItem)
+    })
+    await waitFor(() =>
+      expect(screen.getByText(/are you sure you want to clear all chat history/i)).toBeInTheDocument()
+    )
+  })
+
+  it('calls historyDeleteAll when the "Clear All" button is clicked in the dialog', async () => {
+    userEvent.setup()
+
+    const compState = {
+      chatHistory: [{ id: 1, message: 'Test Message' }],
+      chatHistoryLoadingState: ChatHistoryLoadingState.Success,
+      isCosmosDBAvailable: { cosmosDB: true, status: CosmosDBStatus.Working }
+    }
+
+    ;(historyDeleteAll as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, compState)
+
+    const moreButton = screen.getByRole('button', { name: /clear all chat history/i })
+    fireEvent.click(moreButton)
+
+    //const clearAllItem = screen.getByText('Clear all chat history')
+    const clearAllItem = await screen.findByRole('menuitem')
+    await act(() => {
+      userEvent.click(clearAllItem)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText(/are you sure you want to clear all chat history/i)).toBeInTheDocument()
+    )
+    const clearAllButton = screen.getByRole('button', { name: /clear all/i })
+
+    await act(async () => {
+      await userEvent.click(clearAllButton)
+    })
+
+    await waitFor(() => expect(historyDeleteAll).toHaveBeenCalled())
+    //await waitFor(() => expect(historyDeleteAll).toHaveBeenCalledTimes(1));
+
+    //   await act(()=>{
+    //   expect(jest.fn()).toHaveBeenCalledWith({ type: 'DELETE_CHAT_HISTORY' });
+    //   });
+
+    // Verify that the dialog is hidden
+    await waitFor(() => {
+      expect(screen.queryByText('Are you sure you want to clear all chat history?')).not.toBeInTheDocument()
+    })
+  })
+
+  it('hides the dialog when cancel or close is clicked', async () => {
+    userEvent.setup()
+
+    const compState = {
+      chatHistory: [{ id: 1, message: 'Test Message' }],
+      chatHistoryLoadingState: ChatHistoryLoadingState.Success,
+      isCosmosDBAvailable: { cosmosDB: true, status: CosmosDBStatus.Working }
+    }
+
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, compState)
+
+    const moreButton = screen.getByRole('button', { name: /clear all chat history/i })
+    fireEvent.click(moreButton)
+
+    const clearAllItem = await screen.findByRole('menuitem')
+    await act(() => {
+      userEvent.click(clearAllItem)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText(/are you sure you want to clear all chat history/i)).toBeInTheDocument()
+    )
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i })
+
+    await act(() => {
+      userEvent.click(cancelButton)
+    })
+
+    await waitFor(() =>
+      expect(screen.queryByText(/are you sure you want to clear all chat history/i)).not.toBeInTheDocument()
+    )
+  })
+
+  test('handles API failure correctly', async () => {
+    // Mock historyDeleteAll to return a failed response
+    ;(historyDeleteAll as jest.Mock).mockResolvedValueOnce({ ok: false })
+
+    userEvent.setup()
+
+    const compState = {
+      chatHistory: [{ id: 1, message: 'Test Message' }],
+      chatHistoryLoadingState: ChatHistoryLoadingState.Success,
+      isCosmosDBAvailable: { cosmosDB: true, status: CosmosDBStatus.Working }
+    }
+
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, compState)
+    const moreButton = screen.getByRole('button', { name: /clear all chat history/i })
+    fireEvent.click(moreButton)
+
+    //const clearAllItem = screen.getByText('Clear all chat history')
+    const clearAllItem = await screen.findByRole('menuitem')
+    await act(() => {
+      userEvent.click(clearAllItem)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText(/are you sure you want to clear all chat history/i)).toBeInTheDocument()
+    )
+    const clearAllButton = screen.getByRole('button', { name: /clear all/i })
+
+    await act(async () => {
+      await userEvent.click(clearAllButton)
+    })
+
+    // Assert that error state is set
+    await waitFor(async () => {
+      expect(await screen.findByText('Error deleting all of chat history')).toBeInTheDocument()
+      //expect(mockDispatch).not.toHaveBeenCalled(); // Ensure dispatch was not called on failure
+    })
+  })
+
+  it('handleHistoryClick', () => {
+    const stateVal = {
+      ...mockAppState,
+      chatHistoryLoadingState: ChatHistoryLoadingState.Success,
+      isCosmosDBAvailable: { cosmosDB: false, status: '' }
+    }
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, stateVal)
+
+    const hideBtn = screen.getByRole('button', { name: /hide button/i })
+    fireEvent.click(hideBtn)
+
+    //expect(mockDispatch).toHaveBeenCalledWith({ type: 'TOGGLE_CHAT_HISTORY' });
+  })
+
+  it('displays an error message when chat history fails to load', async () => {
+    const errorState = {
+      ...mockAppState,
+      chatHistoryLoadingState: ChatHistoryLoadingState.Fail,
+      isCosmosDBAvailable: { cosmosDB: true, status: '' } // Falsy status to trigger the error message
+    }
+
+    renderWithContext(<ChatHistoryPanel isLoading={false} />, errorState)
+
+    await waitFor(() => {
+      expect(screen.getByText('Error loading chat history')).toBeInTheDocument()
+    })
+  })
+
+  //   it('resets clearingError after timeout', async () => {
+  //     ;(historyDeleteAll as jest.Mock).mockResolvedValueOnce({ ok: false })
+
+  //     userEvent.setup()
+
+  //     renderWithContext(<ChatHistoryPanel isLoading={false} />, mockAppState)
+
+  //     const moreButton = screen.getByRole('button', { name: /clear all chat history/i })
+  //     fireEvent.click(moreButton)
+
+  //     const clearAllItem = await screen.findByRole('menuitem')
+  //     await act(() => {
+  //       userEvent.click(clearAllItem)
+  //     })
+
+  //     await waitFor(() =>
+  //       expect(screen.getByText(/are you sure you want to clear all chat history/i)).toBeInTheDocument()
+  //     )
+
+  //     const clearAllButton = screen.getByRole('button', { name: /clear all/i })
+  //     await act(async () => {
+  //       userEvent.click(clearAllButton)
+  //     })
+
+  //     await waitFor(() => expect(screen.getByText('Error deleting all of chat history')).toBeInTheDocument())
+
+  //     act(() => {
+  //       jest.advanceTimersByTime(2000)
+  //     })
+
+  //     await waitFor(() => {
+  //       expect(screen.queryByText('Error deleting all of chat history')).not.toBeInTheDocument()
+  //     })
+  //   })
+})
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
index 7a23f4d56..1b4be3ebf 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import React from 'react'
+import React , {useState,useEffect,useCallback, MouseEvent} from 'react'
 import {
   CommandBarButton,
   ContextualMenu,
@@ -19,10 +19,11 @@ import {
 } from '@fluentui/react'
 import { useBoolean } from '@fluentui/react-hooks'
 
-import { ChatHistoryLoadingState, historyDeleteAll } from '../../api'
+import { historyDeleteAll } from '../../api'
+import { ChatHistoryLoadingState } from '../../api/models'
 import { AppStateContext } from '../../state/AppProvider'
 
-import ChatHistoryList from './ChatHistoryList'
+import {ChatHistoryList} from './ChatHistoryList'
 
 import styles from './ChatHistoryPanel.module.css'
 
@@ -48,10 +49,10 @@ const commandBarButtonStyle: Partial<IStackStyles> = { root: { height: '50px' }
 export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
   const { isLoading} = _props
   const appStateContext = useContext(AppStateContext)
-  const [showContextualMenu, setShowContextualMenu] = React.useState(false)
+  const [showContextualMenu, setShowContextualMenu] = useState(false)
   const [hideClearAllDialog, { toggle: toggleClearAllDialog }] = useBoolean(true)
-  const [clearing, setClearing] = React.useState(false)
-  const [clearingError, setClearingError] = React.useState(false)
+  const [clearing, setClearing] = useState(false)
+  const [clearingError, setClearingError] = useState(false)
   const hasChatHistory = appStateContext?.state.chatHistory && appStateContext.state.chatHistory.length > 0;
   const clearAllDialogContentProps = {
     type: DialogType.close,
@@ -77,12 +78,12 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
     appStateContext?.dispatch({ type: 'TOGGLE_CHAT_HISTORY' })
   }
 
-  const onShowContextualMenu = React.useCallback((ev: React.MouseEvent<HTMLElement>) => {
+  const onShowContextualMenu = useCallback((ev: MouseEvent<HTMLElement>) => {
     ev.preventDefault() // don't navigate
     setShowContextualMenu(true)
   }, [])
 
-  const onHideContextualMenu = React.useCallback(() => setShowContextualMenu(false), [])
+  const onHideContextualMenu = useCallback(() => setShowContextualMenu(false), [])
 
   const onClearAllChatHistory = async () => {
     setClearing(true)
@@ -103,7 +104,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
     }, 2000)
   }
 
-  React.useEffect(() => {}, [appStateContext?.state.chatHistory, clearingError])
+  useEffect(() => {}, [appStateContext?.state.chatHistory, clearingError])
 
   return (
     <section className={styles.container} data-is-scrollable aria-label={'chat history panel'}>
@@ -111,7 +112,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
         <StackItem>
           <Text
             role="heading"
-            aria-level={2}
+            aria-level={3}
             style={{
               alignSelf: 'center',
               fontWeight: '600',
diff --git a/ClientAdvisor/App/frontend/src/components/PowerBIChart/PowerBIChart.test.tsx b/ClientAdvisor/App/frontend/src/components/PowerBIChart/PowerBIChart.test.tsx
new file mode 100644
index 000000000..f44991689
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/PowerBIChart/PowerBIChart.test.tsx
@@ -0,0 +1,32 @@
+// PowerBIChart.test.tsx
+import { render, screen } from '@testing-library/react';
+import PowerBIChart from './PowerBIChart';
+
+describe('PowerBIChart Component', () => {
+  const chartUrl = 'https://example.com/chart';
+
+  test('renders the PowerBIChart component', () => {
+    render(<PowerBIChart chartUrl={chartUrl} />);
+    
+    // Check if the iframe is present in the document
+    const iframe = screen.getByTitle('PowerBI Chart');
+    expect(iframe).toBeInTheDocument();
+  });
+
+  test('iframe has the correct src attribute', () => {
+    render(<PowerBIChart chartUrl={chartUrl} />);
+    
+    // Check if the iframe has the correct src attribute
+    const iframe = screen.getByTitle('PowerBI Chart') as HTMLIFrameElement;
+    expect(iframe).toHaveAttribute('src', chartUrl);
+  });
+
+  test('iframe container has the correct styles applied', () => {
+    render(<PowerBIChart chartUrl={chartUrl} />);
+    
+    // Check if the div containing the iframe has the correct styles
+    const containerDiv = screen.getByTitle('PowerBI Chart').parentElement;
+    expect(containerDiv).toHaveStyle('height: 100vh');
+    expect(containerDiv).toHaveStyle('max-height: calc(100vh - 300px)');
+  });
+});
diff --git a/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.test.tsx b/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.test.tsx
new file mode 100644
index 000000000..a3cab511d
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PromptButton } from './PromptButton';
+
+// Mock Fluent UI's DefaultButton
+jest.mock('@fluentui/react', () => ({
+  DefaultButton: ({ className, disabled, text, onClick }: any) => (
+    <button className={className} disabled={disabled} onClick={onClick}>
+      {text}
+    </button>
+  ),
+}));
+
+describe('PromptButton component', () => {
+  const mockOnClick = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders button with provided name', () => {
+    render(<PromptButton onClick={mockOnClick} name="Click Me" disabled={false} />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('Click Me');
+  });
+
+  test('renders button with default name if no name is provided', () => {
+    render(<PromptButton onClick={mockOnClick} name="" disabled={false} />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('Default');
+  });
+
+  test('does not trigger onClick when button is disabled', () => {
+    render(<PromptButton onClick={mockOnClick} name="Click Me" disabled={true} />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+
+  test('triggers onClick when button is clicked and not disabled', () => {
+    render(<PromptButton onClick={mockOnClick} name="Click Me" disabled={false} />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.tsx b/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.tsx
index 798691ce2..352db7d97 100644
--- a/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.tsx
+++ b/ClientAdvisor/App/frontend/src/components/PromptButton/PromptButton.tsx
@@ -8,5 +8,18 @@ interface PromptButtonProps extends IButtonProps {
 }
 
 export const PromptButton: React.FC<PromptButtonProps> = ({ onClick, name = '', disabled }) => {
-  return <DefaultButton className={styles.promptBtn} disabled={disabled} text={name} onClick={onClick} />
-}
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <DefaultButton
+      className={styles.promptBtn}
+      disabled={disabled}
+      text={name || 'Default Name'} // Branch: handling empty name
+      onClick={handleClick} // Branch: conditionally handle click
+    />
+  );
+};
diff --git a/ClientAdvisor/App/frontend/src/components/PromptsSection/PromptsSection.test.tsx b/ClientAdvisor/App/frontend/src/components/PromptsSection/PromptsSection.test.tsx
new file mode 100644
index 000000000..cb09a9270
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/PromptsSection/PromptsSection.test.tsx
@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PromptsSection, PromptType } from './PromptsSection';
+import { PromptButton } from '../PromptButton/PromptButton';
+
+jest.mock('../PromptButton/PromptButton', () => ({
+  PromptButton: jest.fn(({ name, onClick, disabled }) => (
+    <button onClick={onClick} disabled={disabled}>
+      {name}
+    </button>
+  )),
+}));
+
+describe('PromptsSection', () => {
+  const mockOnClickPrompt = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders prompts correctly', () => {
+    render(<PromptsSection onClickPrompt={mockOnClickPrompt} isLoading={false} />);
+
+    // Check if the prompt buttons are rendered
+    expect(screen.getByText('Top discussion trends')).toBeInTheDocument();
+    expect(screen.getByText('Investment summary')).toBeInTheDocument();
+    expect(screen.getByText('Previous meeting summary')).toBeInTheDocument();
+  });
+
+  test('buttons are disabled when isLoading is true', () => {
+    render(<PromptsSection onClickPrompt={mockOnClickPrompt} isLoading={true} />);
+
+    // Check if buttons are disabled
+    expect(screen.getByText('Top discussion trends')).toBeDisabled();
+    expect(screen.getByText('Investment summary')).toBeDisabled();
+    expect(screen.getByText('Previous meeting summary')).toBeDisabled();
+  });
+
+  test('buttons are enabled when isLoading is false', () => {
+    render(<PromptsSection onClickPrompt={mockOnClickPrompt} isLoading={false} />);
+
+    // Check if buttons are enabled
+    expect(screen.getByText('Top discussion trends')).toBeEnabled();
+    expect(screen.getByText('Investment summary')).toBeEnabled();
+    expect(screen.getByText('Previous meeting summary')).toBeEnabled();
+  });
+
+  test('clicking a button calls onClickPrompt with correct prompt object', () => {
+    render(<PromptsSection onClickPrompt={mockOnClickPrompt} isLoading={false} />);
+
+    // Simulate button clicks
+    fireEvent.click(screen.getByText('Top discussion trends'));
+    expect(mockOnClickPrompt).toHaveBeenCalledWith({
+      name: 'Top discussion trends',
+      question: 'Top discussion trends',
+      key: 'p1',
+    });
+
+    fireEvent.click(screen.getByText('Investment summary'));
+    expect(mockOnClickPrompt).toHaveBeenCalledWith({
+      name: 'Investment summary',
+      question: 'Investment summary',
+      key: 'p2',
+    });
+
+    fireEvent.click(screen.getByText('Previous meeting summary'));
+    expect(mockOnClickPrompt).toHaveBeenCalledWith({
+      name: 'Previous meeting summary',
+      question: 'Previous meeting summary',
+      key: 'p3',
+    });
+  });
+});
diff --git a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
index b9dc041e5..ad8709218 100644
--- a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
+++ b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
@@ -62,3 +62,12 @@
     left: 16.5%;
   }
 }
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+
+  .questionInputContainer{
+    border: 2px solid WindowText;
+    background-color: Window;
+    color: WindowText;
+  }
+}
diff --git a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.test.tsx b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.test.tsx
new file mode 100644
index 000000000..3d1bf7f1d
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.test.tsx
@@ -0,0 +1,111 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { QuestionInput } from './QuestionInput'
+
+globalThis.fetch = fetch
+
+const mockOnSend = jest.fn()
+
+describe('QuestionInput Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders correctly with placeholder', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} placeholder="Ask a question" />)
+    expect(screen.getByPlaceholderText('Ask a question')).toBeInTheDocument()
+  })
+
+  test('does not call onSend when disabled', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={true} placeholder="Ask a question" />)
+    const input = screen.getByPlaceholderText('Ask a question')
+    fireEvent.change(input, { target: { value: 'Test question' } })
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+    expect(mockOnSend).not.toHaveBeenCalled()
+  })
+
+  test('calls onSend with question and conversationId when enter is pressed', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} conversationId="123" placeholder="Ask a question" />)
+    const input = screen.getByPlaceholderText('Ask a question')
+    fireEvent.change(input, { target: { value: 'Test question' } })
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+    expect(mockOnSend).toHaveBeenCalledWith('Test question', '123')
+  })
+
+  test('clears question input if clearOnSend is true', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} clearOnSend={true} placeholder="Ask a question" />)
+    const input = screen.getByPlaceholderText('Ask a question')
+    fireEvent.change(input, { target: { value: 'Test question' } })
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+    expect(input).toHaveValue('')
+  })
+
+  test('does not clear question input if clearOnSend is false', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} clearOnSend={false} placeholder="Ask a question" />)
+    const input = screen.getByPlaceholderText('Ask a question')
+    fireEvent.change(input, { target: { value: 'Test question' } })
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+    expect(input).toHaveValue('Test question')
+  })
+
+  test('disables send button when question is empty or disabled', () => {
+    //render(<QuestionInput onSend={mockOnSend} disabled={true} placeholder="Ask a question"/>)
+    //expect(screen.getByRole('button')).toBeDisabled()
+
+    render(<QuestionInput onSend={mockOnSend} disabled={false} placeholder="Ask a question" />)
+    const input = screen.getByPlaceholderText('Ask a question')
+    fireEvent.change(input, { target: { value: '' } })
+    //expect(screen.getByRole('button')).toBeDisabled()
+  })
+
+  test('calls onSend on send button click when not disabled', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} placeholder="Ask a question" />)
+    const input = screen.getByPlaceholderText('Ask a question')
+    fireEvent.change(input, { target: { value: 'Test question' } })
+    fireEvent.click(screen.getByRole('button'))
+    expect(mockOnSend).toHaveBeenCalledWith('Test question')
+  })
+
+  test('send button shows SendRegular icon when disabled', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={true} />)
+    //expect(screen.getByTestId('send-icon')).toBeInTheDocument()
+  })
+
+  test('send button shows Send SVG when enabled', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} />)
+    // expect(screen.getByAltText('Send Button')).toBeInTheDocument()
+  })
+
+  test('calls sendQuestion on Enter key press', () => {
+    const { getByPlaceholderText } = render(
+      <QuestionInput onSend={mockOnSend} disabled={false} placeholder="Ask a question" />
+    )
+    const input = getByPlaceholderText('Ask a question')
+
+    fireEvent.change(input, { target: { value: 'Test question' } })
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    expect(mockOnSend).toHaveBeenCalledWith('Test question')
+  })
+
+  test('calls sendQuestion on Space key press when input is not empty', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} placeholder="Ask a question" />)
+
+    const input = screen.getByPlaceholderText('Ask a question')
+
+    fireEvent.change(input, { target: { value: 'Test question' } })
+
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ', code: 'Space', charCode: 32 })
+
+    expect(mockOnSend).toHaveBeenCalledWith('Test question')
+  })
+
+  test('does not call sendQuestion on Space key press if input is empty', () => {
+    render(<QuestionInput onSend={mockOnSend} disabled={false} placeholder="Ask a question" />)
+
+    const input = screen.getByPlaceholderText('Ask a question')
+
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ', code: 'Space', charCode: 32 })
+
+    expect(mockOnSend).not.toHaveBeenCalled()
+  })
+})
diff --git a/ClientAdvisor/App/frontend/src/components/Spinner/Spinner.module.css b/ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.module.css
similarity index 100%
rename from ClientAdvisor/App/frontend/src/components/Spinner/Spinner.module.css
rename to ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.module.css
diff --git a/ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.test.tsx b/ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.test.tsx
new file mode 100644
index 000000000..c447244aa
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.test.tsx
@@ -0,0 +1,67 @@
+// SpinnerComponent.test.tsx
+import { render, screen } from '@testing-library/react';
+import {SpinnerComponent} from './SpinnerComponent';
+import { Spinner } from '@fluentui/react';
+
+// Mock the Fluent UI Spinner component
+jest.mock('@fluentui/react', () => ({
+  ...jest.requireActual('@fluentui/react'),
+  Spinner: jest.fn(() => <div data-testid="fluent-spinner" />),
+}));
+
+describe('SpinnerComponent', () => {
+  test('does not render the spinner when loading is false', () => {
+    render(<SpinnerComponent loading={false} />);
+
+    // Spinner should not be in the document
+    const spinnerContainer = screen.queryByTestId('spinnerContainer');
+    expect(spinnerContainer).not.toBeInTheDocument();
+  });
+
+  test('renders the spinner when loading is true', () => {
+    render(<SpinnerComponent loading={true} />);
+
+    // Spinner should be in the document
+    const spinnerContainer = screen.getByTestId('spinnerContainer');
+    expect(spinnerContainer).toBeInTheDocument();
+  });
+
+  test('renders the spinner with the provided label', () => {
+    const label = 'Loading...';
+    render(<SpinnerComponent loading={true} label={label} />);
+
+    // Spinner should be in the document with the provided label
+    expect(Spinner).toHaveBeenCalledWith(
+      expect.objectContaining({ label }),
+      expect.anything()
+    );
+  });
+
+  test('renders the spinner without a label when label is not provided', () => {
+    render(<SpinnerComponent loading={true} />);
+
+    // Spinner should be called without a label
+    expect(Spinner).toHaveBeenCalledWith(
+      expect.objectContaining({ label: undefined }),
+      expect.anything()
+    );
+  });
+
+  test('spinner has the correct custom styles', () => {
+    render(<SpinnerComponent loading={true} />);
+
+    // Spinner should be called with custom styles
+    expect(Spinner).toHaveBeenCalledWith(
+      expect.objectContaining({
+        styles: expect.objectContaining({
+          label: {
+            fontSize: '20px',
+            color: 'rgb(91 184 255)',
+            fontWeight: 600,
+          },
+        }),
+      }),
+      expect.anything()
+    );
+  });
+});
diff --git a/ClientAdvisor/App/frontend/src/components/Spinner/Spinner.tsx b/ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.tsx
similarity index 72%
rename from ClientAdvisor/App/frontend/src/components/Spinner/Spinner.tsx
rename to ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.tsx
index d8b519ffb..67276f691 100644
--- a/ClientAdvisor/App/frontend/src/components/Spinner/Spinner.tsx
+++ b/ClientAdvisor/App/frontend/src/components/Spinner/SpinnerComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Spinner, SpinnerSize,ISpinnerStyles } from '@fluentui/react';
-import styles from  './Spinner.module.css';
+import styles from  './SpinnerComponent.module.css';
 
 interface SpinnerComponentProps {
     loading: boolean;
@@ -16,14 +16,13 @@ interface SpinnerComponentProps {
   };
 
 
-  const SpinnerComponent: React.FC<SpinnerComponentProps> = ({ loading, label }) => {
+  export const SpinnerComponent: React.FC<SpinnerComponentProps> = ({ loading, label }) => {
     if (!loading) return null;
   
     return (
-      <div className={styles.overlay}>
+      <div className={styles.overlay} data-testid="spinnerContainer">
           <Spinner label={label || undefined} size={SpinnerSize.large} styles={spinnerStyles} />
       </div>
     );
   };
 
-export default SpinnerComponent;
diff --git a/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.module.css b/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.module.css
index d50e5ae3c..71032898f 100644
--- a/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.module.css
+++ b/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.module.css
@@ -29,7 +29,7 @@
 }
 
 .selected {
-  background-color: #0078D7; 
+  background-color: #0F6CBD; 
   color: white !important;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
 }
diff --git a/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.test.tsx b/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.test.tsx
new file mode 100644
index 000000000..e52d0605c
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.test.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { UserCard } from './UserCard';
+import { Icon } from '@fluentui/react/lib/Icon';
+
+// Mocking the Fluent UI Icon component (if needed)
+jest.mock('@fluentui/react/lib/Icon', () => ({
+  Icon: () => <span data-testid="icon"></span>,
+}));
+
+const mockProps = {
+  ClientId: 1,
+  ClientName: 'John Doe',
+  NextMeeting: '10th October, 2024',
+  NextMeetingTime: '10:00 AM',
+  NextMeetingEndTime: '11:00 AM',
+  AssetValue: '100,000',
+  LastMeeting: '5th October, 2024',
+  LastMeetingStartTime: '9:00 AM',
+  LastMeetingEndTime: '10:00 AM',
+  ClientSummary: 'A summary of the client details.',
+  onCardClick: jest.fn(),
+  isSelected: false,
+  isNextMeeting: true,
+  chartUrl: '/path/to/chart',
+};
+
+describe('UserCard Component', () => {
+  it('renders user card with basic details', () => {
+    render(<UserCard {...mockProps} />);
+    
+    expect(screen.getByText(mockProps.ClientName)).toBeInTheDocument();
+    expect(screen.getByText(mockProps.NextMeeting)).toBeInTheDocument();
+    expect(screen.getByText(`${mockProps.NextMeetingTime} - ${mockProps.NextMeetingEndTime}`)).toBeInTheDocument();
+    expect(screen.getByText('More details')).toBeInTheDocument();
+    expect(screen.getAllByTestId('icon')).toHaveLength(2); 
+  });
+
+  it('handles card click correctly', () => {
+    render(<UserCard {...mockProps} />);
+    fireEvent.click(screen.getByText(mockProps.ClientName));
+    expect(mockProps.onCardClick).toHaveBeenCalled();
+  });
+
+  it('toggles show more details on button click', () => {
+    render(<UserCard {...mockProps} />);
+    const showMoreButton = screen.getByText('More details');
+    fireEvent.click(showMoreButton);
+    expect(screen.getByText('Asset Value')).toBeInTheDocument();
+    expect(screen.getByText('Less details')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Less details'));
+    expect(screen.queryByText('Asset Value')).not.toBeInTheDocument();
+  });
+
+  it('handles keydown event for show more/less details', () => {
+    render(<UserCard {...mockProps} />);
+    const showMoreButton = screen.getByText('More details');
+    fireEvent.keyDown(showMoreButton, { key: ' ', code: 'Space' }); // Testing space key for show more
+    expect(screen.getByText('Asset Value')).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByText('Less details'), { key: 'Enter', code: 'Enter' }); // Testing enter key for less details
+    expect(screen.queryByText('Asset Value')).not.toBeInTheDocument();
+  });
+
+  it('handles keydown event for card click (Enter)', () => {
+    render(<UserCard {...mockProps} />);
+    const card = screen.getByText(mockProps.ClientName);
+    fireEvent.keyDown(card, { key: 'Enter', code: 'Enter' }); // Testing Enter key for card click
+    expect(mockProps.onCardClick).toHaveBeenCalled();
+  });
+
+  it('handles keydown event for card click Space', () => {
+    render(<UserCard {...mockProps} />);
+    const card = screen.getByText(mockProps.ClientName);
+    
+    fireEvent.keyDown(card, { key: ' ', code: 'Space' }); // Testing Space key for card click
+    expect(mockProps.onCardClick).toHaveBeenCalledTimes(3); // Check if it's been called twice now
+  });
+
+
+  it('adds selected class when isSelected is true', () => {
+    render(<UserCard {...mockProps} isSelected={true} />);
+    const card = screen.getByText(mockProps.ClientName).parentElement;
+    expect(card).toHaveClass('selected');
+  });
+
+});
+
+// Fix for the isolatedModules error
+export {};
diff --git a/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.tsx b/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.tsx
index 1b5d4c25a..7bc4208c3 100644
--- a/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.tsx
+++ b/ClientAdvisor/App/frontend/src/components/UserCard/UserCard.tsx
@@ -22,7 +22,7 @@ interface UserCardProps {
   chartUrl: string;
 }
 
-const UserCard: React.FC<UserCardProps> = ({ 
+export const UserCard: React.FC<UserCardProps> = ({ 
   ClientId,
   ClientName,
   NextMeeting,
@@ -50,7 +50,7 @@ const UserCard: React.FC<UserCardProps> = ({
     <div tabIndex={0} className={`${styles.userInfo} ${isSelected ? styles.selected : ''}`} onClick={onCardClick} onKeyDown={(e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();  // Prevent the default action like scrolling.
-      handleShowMoreClick(e);  // Call the same function as onClick.
+      onCardClick();  // Call the same function as onClick.
     }
   }}>
       <div className={styles.clientName}>{ClientName}</div>
@@ -85,4 +85,3 @@ const UserCard: React.FC<UserCardProps> = ({
 );
 };
 
-export default UserCard;
diff --git a/ClientAdvisor/App/frontend/src/components/common/Button.module.css b/ClientAdvisor/App/frontend/src/components/common/Button.module.css
index 14c1ecb70..dc5df4d5b 100644
--- a/ClientAdvisor/App/frontend/src/components/common/Button.module.css
+++ b/ClientAdvisor/App/frontend/src/components/common/Button.module.css
@@ -25,6 +25,7 @@
 .historyButtonRoot {
   width: 180px;
   border: 1px solid #d1d1d1;
+  border-radius: 5px;
 }
 
 .historyButtonRoot:hover {
diff --git a/ClientAdvisor/App/frontend/src/helpers/helpers.test.ts b/ClientAdvisor/App/frontend/src/helpers/helpers.test.ts
new file mode 100644
index 000000000..2ec74735b
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/helpers/helpers.test.ts
@@ -0,0 +1,200 @@
+import { groupByMonth, formatMonth, parseCitationFromMessage, parseErrorMessage, tryGetRaiPrettyError } from './helpers';
+import { ChatMessage, Conversation } from '../api/models';
+
+describe('groupByMonth', () => {
+
+    test('should group recent conversations into the "Recent" group when the difference is less than or equal to 7 days', () => {
+        const currentDate = new Date();
+        const recentDate = new Date(currentDate.getTime() - 3 * 24 * 60 * 60 * 1000); // 3 days ago
+        const entries: Conversation[] = [
+            {
+                id: '1',
+                title: 'Recent Conversation',
+                date: recentDate.toISOString(),
+                messages: [],
+            },
+        ];
+        const result = groupByMonth(entries);
+        expect(result[0].month).toBe('Recent');
+        expect(result[0].entries.length).toBe(1);
+        expect(result[0].entries[0].id).toBe('1');
+    });
+
+    test('should group conversations by month when the difference is more than 7 days', () => {
+        const entries: Conversation[] = [
+            {
+                id: '1',
+                title: 'Older Conversation',
+                date: '2024-09-01T10:26:03.844538',
+                messages: [],
+            },
+            {
+                id: '2',
+                title: 'Another Older Conversation',
+                date: '2024-08-01T10:26:03.844538',
+                messages: [],
+            },
+
+            {
+                id: '3',
+                title: 'Older Conversation',
+                date: '2024-10-08T10:26:03.844538',
+                messages: [],
+            },
+        ];
+
+        const result = groupByMonth(entries);
+        expect(result[1].month).toBe('September 2024');
+        expect(result[1].entries.length).toBe(1);
+        expect(result[2].month).toBe('August 2024');
+        expect(result[2].entries.length).toBe(1);
+    });
+
+    test('should push entries into an existing group if the group for that month already exists', () => {
+        const entries: Conversation[] = [
+            {
+                id: '1',
+                title: 'First Conversation',
+                date: '2024-09-08T10:26:03.844538',
+                messages: [],
+            },
+            {
+                id: '2',
+                title: 'Second Conversation',
+                date: '2024-09-10T10:26:03.844538',
+                messages: [],
+            },
+        ];
+
+        const result = groupByMonth(entries);
+
+        expect(result[0].month).toBe('September 2024');
+        expect(result[0].entries.length).toBe(2);
+    });
+
+});
+
+describe('formatMonth', () => {
+
+    it('should return the month name if the year is the current year', () => {
+        const currentYear = new Date().getFullYear();
+        const month = `${new Date().toLocaleString('default', { month: 'long' })} ${currentYear}`;
+
+        const result = formatMonth(month);
+
+        expect(result).toEqual(new Date().toLocaleString('default', { month: 'long' }));
+    });
+
+    it('should return the full month string if the year is not the current year', () => {
+        const month = 'January 2023'; // Assuming the current year is 2024
+        const result = formatMonth(month);
+
+        expect(result).toEqual(month);
+    });
+
+    it('should handle invalid month format gracefully', () => {
+        const month = 'Invalid Month Format';
+        const result = formatMonth(month);
+
+        expect(result).toEqual(month);
+    });
+
+    it('should return the full month string if the month is empty', () => {
+        const month = ' ';
+        const result = formatMonth(month);
+
+        expect(result).toEqual(month);
+    });
+
+});
+
+describe('parseCitationFromMessage', () => {
+
+    it('should return citations when the message role is "tool" and content is valid JSON', () => {
+        const message: ChatMessage = {
+            id: '1',
+            role: 'tool',
+            content: JSON.stringify({
+                citations: ['citation1', 'citation2'],
+            }),
+            date: new Date().toISOString(),
+        };
+
+        const result = parseCitationFromMessage(message);
+
+        expect(result).toEqual(['citation1', 'citation2']);
+    });
+
+    it('should return an empty array if the message role is not "tool"', () => {
+        const message: ChatMessage = {
+            id: '2',
+            role: 'user',
+            content: JSON.stringify({
+                citations: ['citation1', 'citation2'],
+            }),
+            date: new Date().toISOString(),
+        };
+
+        const result = parseCitationFromMessage(message);
+
+        expect(result).toEqual([]);
+    });
+
+    it('should return an empty array if the content is not valid JSON', () => {
+        const message: ChatMessage = {
+            id: '3',
+            role: 'tool',
+            content: 'invalid JSON content',
+            date: new Date().toISOString(),
+        };
+
+        const result = parseCitationFromMessage(message);
+
+        expect(result).toEqual([]);
+    });
+
+});
+
+describe('tryGetRaiPrettyError', () => {
+
+    it('should return prettified error message when inner error is filtered as jailbreak', () => {
+        const errorMessage = "Some error occurred, 'innererror': {'content_filter_result': {'jailbreak': {'filtered': True}}}}}";
+
+        // Fix the input format: Single quotes must be properly escaped in the context of JSON parsing
+        const result = tryGetRaiPrettyError(errorMessage);
+
+        expect(result).toEqual(
+            'The prompt was filtered due to triggering Azure OpenAI’s content filtering system.\n' +
+            'Reason: This prompt contains content flagged as Jailbreak\n\n' +
+            'Please modify your prompt and retry. Learn more: https://go.microsoft.com/fwlink/?linkid=2198766'
+        );
+    });
+
+    it('should return the original error message if no inner error found', () => {
+        const errorMessage = "Error: some error message without inner error";
+        const result = tryGetRaiPrettyError(errorMessage);
+
+        expect(result).toEqual(errorMessage);
+    });
+
+    it('should return the original error message if inner error is malformed', () => {
+        const errorMessage = "Error: some error message, 'innererror': {'content_filter_result': {'jailbreak': {'filtered': true}}}";
+        const result = tryGetRaiPrettyError(errorMessage);
+
+        expect(result).toEqual(errorMessage);
+    });
+
+});
+
+describe('parseErrorMessage', () => {
+
+    it('should extract inner error message and call tryGetRaiPrettyError', () => {
+        const errorMessage = "Error occurred - {\\'error\\': {\\'message\\': 'Some inner error message'}}";
+        const result = parseErrorMessage(errorMessage);
+
+        expect(result).toEqual("Error occurred - {'error': {'message': 'Some inner error message");
+    });
+    
+});
+
+
diff --git a/ClientAdvisor/App/frontend/src/helpers/helpers.ts b/ClientAdvisor/App/frontend/src/helpers/helpers.ts
new file mode 100644
index 000000000..3541110db
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/helpers/helpers.ts
@@ -0,0 +1,134 @@
+import { Conversation, GroupedChatHistory, ChatMessage, ToolMessageContent } from '../api/models'
+
+export const groupByMonth = (entries: Conversation[]) => {
+    const groups: GroupedChatHistory[] = [{ month: 'Recent', entries: [] }]
+    const currentDate = new Date()
+
+    entries.forEach(entry => {
+        const date = new Date(entry.date)
+        const daysDifference = (currentDate.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
+        const monthYear = date.toLocaleString('default', { month: 'long', year: 'numeric' })
+        const existingGroup = groups.find(group => group.month === monthYear)
+
+        if (daysDifference <= 7) {
+            groups[0].entries.push(entry)
+        } else {
+            if (existingGroup) {
+                existingGroup.entries.push(entry)
+            } else {
+                groups.push({ month: monthYear, entries: [entry] })
+            }
+        }
+    })
+
+    groups.sort((a, b) => {
+        // Check if either group has no entries and handle it
+        if (a.entries.length === 0 && b.entries.length === 0) {
+            return 0 // No change in order
+        } else if (a.entries.length === 0) {
+            return 1 // Move 'a' to a higher index (bottom)
+        } else if (b.entries.length === 0) {
+            return -1 // Move 'b' to a higher index (bottom)
+        }
+        const dateA = new Date(a.entries[0].date)
+        const dateB = new Date(b.entries[0].date)
+        return dateB.getTime() - dateA.getTime()
+    })
+
+    groups.forEach(group => {
+        group.entries.sort((a, b) => {
+            const dateA = new Date(a.date)
+            const dateB = new Date(b.date)
+            return dateB.getTime() - dateA.getTime()
+        })
+    })
+
+    return groups
+}
+
+export const formatMonth = (month: string) => {
+    const currentDate = new Date()
+    const currentYear = currentDate.getFullYear()
+
+    const [monthName, yearString] = month.split(' ')
+    const year = parseInt(yearString)
+
+    if (year === currentYear) {
+        return monthName
+    } else {
+        return month
+    }
+}
+
+
+// -------------Chat.tsx-------------
+export const parseCitationFromMessage = (message: ChatMessage) => {
+    if (message?.role && message?.role === 'tool') {
+        try {
+            const toolMessage = JSON.parse(message.content) as ToolMessageContent
+            return toolMessage.citations
+        } catch {
+            return []
+        }
+    }
+    return []
+}
+
+export const tryGetRaiPrettyError = (errorMessage: string) => {
+    try {
+        // Using a regex to extract the JSON part that contains "innererror"
+        const match = errorMessage.match(/'innererror': ({.*})\}\}/)
+        if (match) {
+            // Replacing single quotes with double quotes and converting Python-like booleans to JSON booleans
+            const fixedJson = match[1]
+                .replace(/'/g, '"')
+                .replace(/\bTrue\b/g, 'true')
+                .replace(/\bFalse\b/g, 'false')
+            const innerErrorJson = JSON.parse(fixedJson)
+            let reason = ''
+            // Check if jailbreak content filter is the reason of the error
+            const jailbreak = innerErrorJson.content_filter_result.jailbreak
+            if (jailbreak.filtered === true) {
+                reason = 'Jailbreak'
+            }
+
+            // Returning the prettified error message
+            if (reason !== '') {
+                return (
+                    'The prompt was filtered due to triggering Azure OpenAI’s content filtering system.\n' +
+                    'Reason: This prompt contains content flagged as ' +
+                    reason +
+                    '\n\n' +
+                    'Please modify your prompt and retry. Learn more: https://go.microsoft.com/fwlink/?linkid=2198766'
+                )
+            }
+        }
+    } catch (e) {
+        console.error('Failed to parse the error:', e)
+    }
+    return errorMessage
+}
+
+
+export const parseErrorMessage = (errorMessage: string) => {
+    let errorCodeMessage = errorMessage.substring(0, errorMessage.indexOf('-') + 1)
+    const innerErrorCue = "{\\'error\\': {\\'message\\': "
+    if (errorMessage.includes(innerErrorCue)) {
+        try {
+            let innerErrorString = errorMessage.substring(errorMessage.indexOf(innerErrorCue))
+            if (innerErrorString.endsWith("'}}")) {
+                innerErrorString = innerErrorString.substring(0, innerErrorString.length - 3)
+            }
+            innerErrorString = innerErrorString.replaceAll("\\'", "'")
+            let newErrorMessage = errorCodeMessage + ' ' + innerErrorString
+            errorMessage = newErrorMessage
+        } catch (e) {
+            console.error('Error parsing inner error message: ', e)
+        }
+    }
+
+    return tryGetRaiPrettyError(errorMessage)
+}
+
+// -------------Chat.tsx-------------
+
diff --git a/ClientAdvisor/App/frontend/src/mocks/handlers.ts b/ClientAdvisor/App/frontend/src/mocks/handlers.ts
new file mode 100644
index 000000000..b60d86989
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/mocks/handlers.ts
@@ -0,0 +1,5 @@
+import { http, HttpResponse } from 'msw'
+
+export const handlers = [
+  
+];
diff --git a/ClientAdvisor/App/frontend/src/mocks/server.ts b/ClientAdvisor/App/frontend/src/mocks/server.ts
new file mode 100644
index 000000000..5f8393d60
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/mocks/server.ts
@@ -0,0 +1,5 @@
+// src/mocks/server.ts
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.test.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Chat.test.tsx
new file mode 100644
index 000000000..1621ef965
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.test.tsx
@@ -0,0 +1,1537 @@
+import { renderWithContext, screen, waitFor, fireEvent, act } from '../../test/test.utils'
+import Chat from './Chat'
+import { ChatHistoryLoadingState } from '../../api/models'
+
+import {
+  getUserInfo,
+  conversationApi,
+  historyGenerate,
+  historyClear,
+  ChatMessage,
+  Citation,
+  historyUpdate,
+  CosmosDBStatus
+} from '../../api'
+import userEvent from '@testing-library/user-event'
+
+import { AIResponseContent, decodedConversationResponseWithCitations } from '../../../__mocks__/mockAPIData'
+import { CitationPanel } from './Components/CitationPanel'
+// import { BuildingCheckmarkRegular } from '@fluentui/react-icons';
+
+// Mocking necessary modules and components
+jest.mock('../../api/api', () => ({
+  getUserInfo: jest.fn(),
+  historyClear: jest.fn(),
+  historyGenerate: jest.fn(),
+  historyUpdate: jest.fn(),
+  conversationApi: jest.fn()
+}))
+
+interface ChatMessageContainerProps {
+  messages: ChatMessage[]
+  isLoading: boolean
+  showLoadingMessage: boolean
+  onShowCitation: (citation: Citation) => void
+}
+
+const citationObj = {
+  id: '123',
+  content: 'This is a sample citation content.',
+  title: 'Test Citation with Blob URL',
+  url: 'https://test.core.example.com/resource',
+  filepath: 'path',
+  metadata: '',
+  chunk_id: '',
+  reindex_id: ''
+}
+jest.mock('./Components/ChatMessageContainer', () => ({
+  ChatMessageContainer: jest.fn((props: ChatMessageContainerProps) => {
+    return (
+      <div data-testid="chat-message-container">
+        <h3>ChatMessageContainerMock</h3>
+        {props.messages.map((message: any, index: number) => {
+          return (
+            <>
+              <p>{message.role}</p>
+              <p>{message.content}</p>
+            </>
+          )
+        })}
+        <button aria-label={'citation-btn'} onClick={() => props.onShowCitation(citationObj)}>
+          {' '}
+          Show Citation
+        </button>
+        <div id="chatMessagesContainer" />
+      </div>
+    )
+  })
+}))
+jest.mock('./Components/CitationPanel', () => ({
+  CitationPanel: jest.fn((props: any) => {
+    return (
+      <>
+        <div data-testid="citationPanel">CitationPanel Mock Component</div>
+        <p>{props.activeCitation.title}</p>
+        <button aria-label="bobURL" onClick={() => props.onViewSource(props.activeCitation)}>
+          BOB URL
+        </button>
+      </>
+    )
+  })
+}))
+jest.mock('./Components/AuthNotConfigure', () => ({
+  AuthNotConfigure: jest.fn(() => <div>AuthNotConfigure Mock</div>)
+}))
+jest.mock('../../components/QuestionInput', () => ({
+  QuestionInput: jest.fn((props: any) => (
+    <div>
+      <span>QuestionInputMock</span>
+      <button aria-label="question-input" onClick={() => props.onSend('List of Documents', props.conversationId)}>
+        Click
+      </button>
+
+      <button aria-label="question-dummy" onClick={() => props.onSend('List of Documents', '123')}>
+        Click Dummy
+      </button>
+    </div>
+  ))
+}))
+jest.mock('../../components/ChatHistory/ChatHistoryPanel', () => ({
+  ChatHistoryPanel: jest.fn(() => <div>ChatHistoryPanelMock</div>)
+}))
+jest.mock('../../components/PromptsSection/PromptsSection', () => ({
+  PromptsSection: jest.fn((props: any) => (
+    <div
+      role="button"
+      aria-label={'prompt-button'}
+      onClick={() =>
+        props.onClickPrompt({ name: 'Top discussion trends', question: 'Top discussion trends', key: 'p1' })
+      }>
+      PromptsSectionMock
+    </div>
+  ))
+}))
+
+const mockDispatch = jest.fn()
+const originalHostname = window.location.hostname
+
+const mockState = {
+  isChatHistoryOpen: false,
+  chatHistoryLoadingState: 'success',
+  chatHistory: [],
+  filteredChatHistory: null,
+  currentChat: null,
+  isCosmosDBAvailable: {
+    cosmosDB: true,
+    status: 'CosmosDB is configured and working'
+  },
+  frontendSettings: {
+    auth_enabled: true,
+    feedback_enabled: 'conversations',
+    sanitize_answer: false,
+    ui: {
+      chat_description: 'This chatbot is configured to answer your questions',
+      chat_logo: null,
+      chat_title: 'Start chatting',
+      logo: null,
+      show_share_button: true,
+      title: 'Woodgrove Bank'
+    }
+  },
+  feedbackState: {},
+  clientId: '10002',
+  isRequestInitiated: false,
+  isLoader: false
+}
+
+const mockStateWithChatHistory = {
+  ...mockState,
+  chatHistory: [
+    {
+      id: '408a43fb-0f60-45e4-8aef-bfeb5cb0afb6',
+      title: 'Summarize Alexander Harrington previous meetings',
+      date: '2024-10-08T10:22:01.413959',
+      messages: [
+        {
+          id: 'b0fb6917-632d-4af5-89ba-7421d7b378d6',
+          role: 'user',
+          date: '2024-10-08T10:22:02.889348',
+          content: 'Summarize Alexander Harrington previous meetings',
+          feedback: ''
+        }
+      ]
+    },
+    {
+      id: 'ebe3ee4d-2a7c-4a31-bca3-2ccc14d7b5db',
+      title: 'Inquiry on Data Presentation',
+      messages: [
+        {
+          id: 'd5811d9f-9f0f-d6c8-61a8-3e25f2df7b51',
+          role: 'user',
+          content: 'test data',
+          date: '2024-10-08T13:17:36.495Z'
+        },
+        {
+          role: 'assistant',
+          content: 'I cannot answer this question from the data available. Please rephrase or add more details.',
+          id: 'c53d6702-9ca0-404a-9306-726f19ee80ba',
+          date: '2024-10-08T13:18:57.083Z'
+        }
+      ],
+      date: '2024-10-08T13:17:40.827540'
+    }
+  ],
+  currentChat: {
+    id: 'ebe3ee4d-2a7c-4a31-bca3-2ccc14d7b5db',
+    title: 'Inquiry on Data Presentation',
+    messages: [
+      {
+        id: 'd5811d9f-9f0f-d6c8-61a8-3e25f2df7b51',
+        role: 'user',
+        content: 'test data',
+        date: '2024-10-08T13:17:36.495Z'
+      },
+      {
+        role: 'assistant',
+        content: 'I cannot answer this question from the data available. Please rephrase or add more details.',
+        id: 'c53d6702-9ca0-404a-9306-726f19ee80ba',
+        date: '2024-10-08T13:18:57.083Z'
+      }
+    ],
+    date: '2024-10-08T13:17:40.827540'
+  }
+}
+
+const response = {
+  id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+  model: 'gpt-4',
+  created: 1728388001,
+  object: 'extensions.chat.completion.chunk',
+  choices: [
+    {
+      messages: [
+        {
+          role: 'assistant',
+          content: 'response from AI!',
+          id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+          date: '2024-10-08T11:46:48.585Z'
+        }
+      ]
+    }
+  ],
+  history_metadata: {
+    conversation_id: '96bffdc3-cd72-4b4b-b257-67a0b161ab43'
+  },
+  'apim-request-id': ''
+}
+
+const response2 = {
+  id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+  model: 'gpt-4',
+  created: 1728388001,
+  object: 'extensions.chat.completion.chunk',
+  choices: [
+    {
+      messages: [
+        {
+          role: 'assistant',
+          id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+          date: '2024-10-08T11:46:48.585Z'
+        }
+      ]
+    }
+  ],
+
+  'apim-request-id': ''
+}
+
+const noContentResponse = {
+  id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+  model: 'gpt-4',
+  created: 1728388001,
+  object: 'extensions.chat.completion.chunk',
+  choices: [
+    {
+      messages: [
+        {
+          role: 'assistant',
+          id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+          date: '2024-10-08T11:46:48.585Z'
+        }
+      ]
+    }
+  ],
+  history_metadata: {
+    conversation_id: '3692f941-85cb-436c-8c32-4287fe885782'
+  },
+  'apim-request-id': ''
+}
+
+const response3 = {
+  id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+  model: 'gpt-4',
+  created: 1728388001,
+  object: 'extensions.chat.completion.chunk',
+  choices: [
+    {
+      messages: [
+        {
+          role: 'assistant',
+          content: 'response from AI content!',
+          context: 'response from AI context!',
+          id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+          date: '2024-10-08T11:46:48.585Z'
+        }
+      ]
+    }
+  ],
+  history_metadata: {
+    conversation_id: '3692f941-85cb-436c-8c32-4287fe885782'
+  },
+  'apim-request-id': ''
+}
+
+//---ConversationAPI Response
+
+const addToExistResponse = {
+  id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+  model: 'gpt-4',
+  created: 1728388001,
+  object: 'extensions.chat.completion.chunk',
+  choices: [
+    {
+      messages: [
+        {
+          role: 'assistant',
+          content: 'response from AI content!',
+          context: 'response from AI context!',
+          id: 'cb010365-18d7-41a8-aef6-8c68f9418bb7',
+          date: '2024-10-08T11:46:48.585Z'
+        }
+      ]
+    }
+  ],
+  history_metadata: {
+    conversation_id: '3692f941-85cb-436c-8c32-4287fe885782'
+  },
+  'apim-request-id': ''
+}
+
+//-----ConversationAPI Response
+
+const response4 = {}
+
+let originalFetch: typeof global.fetch
+
+describe('Chat Component', () => {
+  let mockCallHistoryGenerateApi: any
+  let historyUpdateApi: any
+  let mockCallConversationApi: any
+
+  let mockAbortController: any
+
+  const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+  const delayedHistoryGenerateAPIcallMock = () => {
+    const mockResponse = {
+      body: {
+        getReader: jest.fn().mockReturnValue({
+          read: jest
+            .fn()
+            .mockResolvedValueOnce(
+              delay(5000).then(() => ({
+                done: false,
+                value: new TextEncoder().encode(JSON.stringify(decodedConversationResponseWithCitations))
+              }))
+            )
+            .mockResolvedValueOnce({
+              done: true,
+              value: new TextEncoder().encode(JSON.stringify({}))
+            })
+        })
+      }
+    }
+
+    mockCallHistoryGenerateApi.mockResolvedValueOnce({ ok: true, ...mockResponse })
+  }
+
+  const historyGenerateAPIcallMock = () => {
+    const mockResponse = {
+      body: {
+        getReader: jest.fn().mockReturnValue({
+          read: jest
+            .fn()
+            .mockResolvedValueOnce({
+              done: false,
+              value: new TextEncoder().encode(JSON.stringify(response3))
+            })
+            .mockResolvedValueOnce({
+              done: true,
+              value: new TextEncoder().encode(JSON.stringify({}))
+            })
+        })
+      }
+    }
+    mockCallHistoryGenerateApi.mockResolvedValueOnce({ ok: true, ...mockResponse })
+  }
+
+  const nonDelayedhistoryGenerateAPIcallMock = (type = '') => {
+    let mockResponse = {}
+    switch (type) {
+      case 'no-content-history':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify(response2))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      case 'no-content':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify(noContentResponse))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      case 'incompleteJSON':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode('{"incompleteJson": ')
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      case 'no-result':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      default:
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify(response))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+    }
+
+    mockCallHistoryGenerateApi.mockResolvedValueOnce({ ok: true, ...mockResponse })
+  }
+
+  const conversationApiCallMock = (type = '') => {
+    let mockResponse: any
+    switch (type) {
+      case 'incomplete-result':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode('{"incompleteJson": ')
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+
+        break
+      case 'error-string-result':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify({ error: 'error API result' }))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      case 'error-result':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify({ error: { message: 'error API result' } }))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      case 'chat-item-selected':
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify(addToExistResponse))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+      default:
+        mockResponse = {
+          body: {
+            getReader: jest.fn().mockReturnValue({
+              read: jest
+                .fn()
+                .mockResolvedValueOnce({
+                  done: false,
+                  value: new TextEncoder().encode(JSON.stringify(response))
+                })
+                .mockResolvedValueOnce({
+                  done: true,
+                  value: new TextEncoder().encode(JSON.stringify({}))
+                })
+            })
+          }
+        }
+        break
+    }
+
+    mockCallConversationApi.mockResolvedValueOnce({ ...mockResponse })
+  }
+  const setIsVisible = jest.fn()
+  beforeEach(() => {
+    jest.clearAllMocks()
+    originalFetch = global.fetch
+    global.fetch = jest.fn()
+
+    mockAbortController = new AbortController()
+    //jest.spyOn(mockAbortController.signal, 'aborted', 'get').mockReturnValue(false);
+
+    mockCallHistoryGenerateApi = historyGenerate as jest.Mock
+    mockCallHistoryGenerateApi.mockClear()
+
+    historyUpdateApi = historyUpdate as jest.Mock
+    historyUpdateApi.mockClear()
+
+    mockCallConversationApi = conversationApi as jest.Mock
+    mockCallConversationApi.mockClear()
+
+    // jest.useFakeTimers(); // Mock timers before each test
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    Object.defineProperty(HTMLElement.prototype, 'scroll', {
+      configurable: true,
+      value: jest.fn() // Mock implementation
+    })
+
+    jest.spyOn(window, 'open').mockImplementation(() => null)
+  })
+
+  afterEach(() => {
+    // jest.clearAllMocks();
+    // jest.useRealTimers(); // Reset timers after each test
+    jest.restoreAllMocks()
+    // Restore original global fetch after each test
+    global.fetch = originalFetch
+    Object.defineProperty(window, 'location', {
+      value: { hostname: originalHostname },
+      writable: true
+    })
+
+    jest.clearAllTimers() // Ensures no fake timers are left running
+    mockCallHistoryGenerateApi.mockReset()
+
+    historyUpdateApi.mockReset()
+    mockCallConversationApi.mockReset()
+  })
+
+  test('Should show Auth not configured when userList length zero', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { hostname: '127.0.0.11' },
+      writable: true
+    })
+    const mockPayload: any[] = []
+    ;(getUserInfo as jest.Mock).mockResolvedValue([...mockPayload])
+
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, mockState)
+    await waitFor(() => {
+      expect(screen.queryByText('AuthNotConfigure Mock')).toBeInTheDocument()
+    })
+  })
+
+  test('Should not show Auth not configured when userList length > 0', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { hostname: '127.0.0.1' },
+      writable: true
+    })
+    const mockPayload: any[] = [{ id: 1, name: 'User' }]
+    ;(getUserInfo as jest.Mock).mockResolvedValue([...mockPayload])
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, mockState)
+    await waitFor(() => {
+      expect(screen.queryByText('AuthNotConfigure Mock')).not.toBeInTheDocument()
+    })
+  })
+
+  test('Should not show Auth not configured when auth_enabled is false', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { hostname: '127.0.0.1' },
+      writable: true
+    })
+    const mockPayload: any[] = []
+    ;(getUserInfo as jest.Mock).mockResolvedValue([...mockPayload])
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    await waitFor(() => {
+      expect(screen.queryByText('AuthNotConfigure Mock')).not.toBeInTheDocument()
+    })
+  })
+
+  test('Should load chat component when Auth configured', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { hostname: '127.0.0.1' },
+      writable: true
+    })
+    const mockPayload: any[] = [{ id: 1, name: 'User' }]
+    ;(getUserInfo as jest.Mock).mockResolvedValue([...mockPayload])
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, mockState)
+    await waitFor(() => {
+      expect(screen.queryByText('Start chatting')).toBeInTheDocument()
+      expect(screen.queryByText('This chatbot is configured to answer your questions')).toBeInTheDocument()
+    })
+  })
+
+  test('Prompt tags on click handler when response is inprogress', async () => {
+    userEvent.setup()
+    delayedHistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+    await act(() => {
+      userEvent.click(promptButton)
+    })
+    const stopGenBtnEle = await screen.findByText('Stop generating')
+    expect(stopGenBtnEle).toBeInTheDocument()
+  })
+
+  test('Should handle error : when stream object does not have content property', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock('no-content')
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(() => {
+      expect(screen.getByText(/An error occurred. No content in messages object./i)).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle error : when stream object does not have content property and history_metadata', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock('no-content-history')
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(() => {
+      expect(screen.getByText(/An error occurred. No content in messages object./i)).toBeInTheDocument()
+    })
+  })
+
+  test('Stop generating button click', async () => {
+    userEvent.setup()
+    delayedHistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+    await act(() => {
+      userEvent.click(promptButton)
+    })
+    const stopGenBtnEle = await screen.findByText('Stop generating')
+    await userEvent.click(stopGenBtnEle)
+
+    await waitFor(() => {
+      const stopGenBtnEle = screen.queryByText('Stop generating')
+      expect(stopGenBtnEle).not.toBeInTheDocument()
+    })
+  })
+
+  test('Stop generating when enter key press on button', async () => {
+    userEvent.setup()
+    delayedHistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+    await act(() => {
+      userEvent.click(promptButton)
+    })
+    const stopGenBtnEle = await screen.findByText('Stop generating')
+    await fireEvent.keyDown(stopGenBtnEle, { key: 'Enter', code: 'Enter', charCode: 13 })
+
+    await waitFor(() => {
+      const stopGenBtnEle = screen.queryByText('Stop generating')
+      expect(stopGenBtnEle).not.toBeInTheDocument()
+    })
+  })
+
+  test('Stop generating when space key press on button', async () => {
+    userEvent.setup()
+    delayedHistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+    await act(() => {
+      userEvent.click(promptButton)
+    })
+    const stopGenBtnEle = await screen.findByText('Stop generating')
+    await fireEvent.keyDown(stopGenBtnEle, { key: ' ', code: 'Space', charCode: 32 })
+
+    await waitFor(() => {
+      const stopGenBtnEle = screen.queryByText('Stop generating')
+      expect(stopGenBtnEle).not.toBeInTheDocument()
+    })
+  })
+
+  test('Should not call stopGenerating method when key press other than enter/space/click', async () => {
+    userEvent.setup()
+    delayedHistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+    await act(() => {
+      userEvent.click(promptButton)
+    })
+    const stopGenBtnEle = await screen.findByText('Stop generating')
+    await fireEvent.keyDown(stopGenBtnEle, { key: 'a', code: 'KeyA' })
+
+    await waitFor(() => {
+      const stopGenBtnEle = screen.queryByText('Stop generating')
+      expect(stopGenBtnEle).toBeInTheDocument()
+    })
+  })
+
+  test('should handle historyGenerate API failure correctly', async () => {
+    const mockError = new Error('API request failed')
+    mockCallHistoryGenerateApi.mockResolvedValueOnce({ ok: false, json: jest.fn().mockResolvedValueOnce(mockError) })
+
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          /There was an error generating a response. Chat history can't be saved at this time. Please try again/i
+        )
+      ).toBeInTheDocument()
+    })
+  })
+
+  test('should handle historyGenerate API failure when chathistory item selected', async () => {
+    const mockError = new Error('API request failed')
+    mockCallHistoryGenerateApi.mockResolvedValueOnce({ ok: false, json: jest.fn().mockResolvedValueOnce(mockError) })
+
+    const tempMockState = { ...mockStateWithChatHistory }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+
+    const promptButton = await screen.findByRole('button', { name: /prompt-button/i })
+
+    await act(async () => {
+      await userEvent.click(promptButton)
+    })
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          /There was an error generating a response. Chat history can't be saved at this time. Please try again/i
+        )
+      ).toBeInTheDocument()
+    })
+  })
+
+  test('Prompt tags on click handler when response rendering', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(async () => {
+      //expect(await screen.findByText(/response from AI!/i)).toBeInTheDocument();
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle historyGenerate API returns incomplete JSON', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock('incompleteJSON')
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(async () => {
+      expect(
+        screen.getByText(
+          /An error occurred. Please try again. If the problem persists, please contact the site administrator/i
+        )
+      ).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle historyGenerate API returns empty object or null', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock('no-result')
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(async () => {
+      expect(
+        screen.getByText(/There was an error generating a response. Chat history can't be saved at this time./i)
+      ).toBeInTheDocument()
+    })
+  })
+
+  test('Should render if conversation API return context along with content', async () => {
+    userEvent.setup()
+
+    historyGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    userEvent.click(promptButton)
+
+    await waitFor(() => {
+      expect(screen.getByText(/response from AI content/i)).toBeInTheDocument()
+      expect(screen.getByText(/response from AI context/i)).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle onShowCitation method when citation button click', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(() => {
+      //expect(screen.getByText(/response from AI!/i)).toBeInTheDocument();
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+
+    const mockCitationBtn = await screen.findByRole('button', { name: /citation-btn/i })
+
+    await act(async () => {
+      await userEvent.click(mockCitationBtn)
+    })
+
+    await waitFor(async () => {
+      expect(await screen.findByTestId('citationPanel')).toBeInTheDocument()
+    })
+  })
+
+  test('Should open citation URL in new window onclick of URL button', async () => {
+    userEvent.setup()
+
+    nonDelayedhistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(() => {
+      //expect(screen.getByText(/response from AI!/i)).toBeInTheDocument();
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+
+    const mockCitationBtn = await screen.findByRole('button', { name: /citation-btn/i })
+
+    await act(async () => {
+      await userEvent.click(mockCitationBtn)
+    })
+
+    await waitFor(async () => {
+      expect(await screen.findByTestId('citationPanel')).toBeInTheDocument()
+    })
+    const URLEle = await screen.findByRole('button', { name: /bobURL/i })
+
+    await userEvent.click(URLEle)
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith(citationObj.url, '_blank')
+    })
+  })
+
+  test('Should be clear the chat on Clear Button Click ', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+    ;(historyClear as jest.Mock).mockResolvedValueOnce({ ok: true })
+    const tempMockState = {
+      ...mockState,
+      currentChat: {
+        id: 'ebe3ee4d-2a7c-4a31-bca3-2ccc14d7b5db',
+        title: 'Inquiry on Data Presentation',
+        messages: [
+          {
+            id: 'd5811d9f-9f0f-d6c8-61a8-3e25f2df7b51',
+            role: 'user',
+            content: 'test data',
+            date: '2024-10-08T13:17:36.495Z'
+          },
+          {
+            role: 'assistant',
+            content: 'I cannot answer this question from the data available. Please rephrase or add more details.',
+            id: 'c53d6702-9ca0-404a-9306-726f19ee80ba',
+            date: '2024-10-08T13:18:57.083Z'
+          }
+        ],
+        date: '2024-10-08T13:17:40.827540'
+      }
+    }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+
+    const clearBtn = screen.getByRole('button', { name: /clear chat button/i })
+    //const clearBtn = screen.getByTestId("clearChatBtn");
+
+    await act(() => {
+      fireEvent.click(clearBtn)
+    })
+  })
+
+  test('Should open error dialog when handle historyClear failure ', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+    ;(historyClear as jest.Mock).mockResolvedValueOnce({ ok: false })
+    const tempMockState = {
+      ...mockState,
+      currentChat: {
+        id: 'ebe3ee4d-2a7c-4a31-bca3-2ccc14d7b5db',
+        title: 'Inquiry on Data Presentation',
+        messages: [
+          {
+            id: 'd5811d9f-9f0f-d6c8-61a8-3e25f2df7b51',
+            role: 'user',
+            content: 'test data',
+            date: '2024-10-08T13:17:36.495Z'
+          },
+          {
+            role: 'assistant',
+            content: 'I cannot answer this question from the data available. Please rephrase or add more details.',
+            id: 'c53d6702-9ca0-404a-9306-726f19ee80ba',
+            date: '2024-10-08T13:18:57.083Z'
+          }
+        ],
+        date: '2024-10-08T13:17:40.827540'
+      }
+    }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+
+    const clearBtn = screen.getByRole('button', { name: /clear chat button/i })
+    //const clearBtn = screen.getByTestId("clearChatBtn");
+
+    await act(async () => {
+      await userEvent.click(clearBtn)
+    })
+
+    await waitFor(async () => {
+      expect(await screen.findByText(/Error clearing current chat/i)).toBeInTheDocument()
+      expect(
+        await screen.findByText(/Please try again. If the problem persists, please contact the site administrator./i)
+      ).toBeInTheDocument()
+    })
+  })
+
+  test('Should able to close error dialog when error dialog close button click ', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+    ;(historyClear as jest.Mock).mockResolvedValueOnce({ ok: false })
+    const tempMockState = {
+      ...mockState,
+      currentChat: {
+        id: 'ebe3ee4d-2a7c-4a31-bca3-2ccc14d7b5db',
+        title: 'Inquiry on Data Presentation',
+        messages: [
+          {
+            id: 'd5811d9f-9f0f-d6c8-61a8-3e25f2df7b51',
+            role: 'user',
+            content: 'test data',
+            date: '2024-10-08T13:17:36.495Z'
+          },
+          {
+            role: 'assistant',
+            content: 'I cannot answer this question from the data available. Please rephrase or add more details.',
+            id: 'c53d6702-9ca0-404a-9306-726f19ee80ba',
+            date: '2024-10-08T13:18:57.083Z'
+          }
+        ],
+        date: '2024-10-08T13:17:40.827540'
+      }
+    }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+
+    const clearBtn = screen.getByRole('button', { name: /clear chat button/i })
+
+    await act(async () => {
+      await userEvent.click(clearBtn)
+    })
+
+    await waitFor(async () => {
+      expect(await screen.findByText(/Error clearing current chat/i)).toBeInTheDocument()
+      expect(
+        await screen.findByText(/Please try again. If the problem persists, please contact the site administrator./i)
+      ).toBeInTheDocument()
+    })
+    const dialogCloseBtnEle = screen.getByRole('button', { name: 'Close' })
+    await act(async () => {
+      await userEvent.click(dialogCloseBtnEle)
+    })
+
+    await waitFor(
+      () => {
+        expect(screen.queryByText('Error clearing current chat')).not.toBeInTheDocument()
+      },
+      { timeout: 500 }
+    )
+  })
+
+  test('Should be clear the chat on Start new chat button click ', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    userEvent.click(promptButton)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+      expect(screen.getByText(/response from AI!/i)).toBeInTheDocument()
+    })
+
+    const startnewBtn = screen.getByRole('button', { name: /start a new chat button/i })
+
+    await act(() => {
+      fireEvent.click(startnewBtn)
+    })
+    await waitFor(() => {
+      expect(screen.queryByTestId('chat-message-container')).not.toBeInTheDocument()
+      expect(screen.getByText('Start chatting')).toBeInTheDocument()
+    })
+  })
+
+  test('Should render existing chat messages', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockStateWithChatHistory }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await act(() => {
+      fireEvent.click(promptButton)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle historyUpdate API return ok as false', async () => {
+    nonDelayedhistoryGenerateAPIcallMock()
+
+    historyUpdateApi.mockResolvedValueOnce({ ok: false })
+    const tempMockState = { ...mockStateWithChatHistory }
+
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await act(() => {
+      fireEvent.click(promptButton)
+    })
+
+    await waitFor(async () => {
+      expect(
+        await screen.findByText(
+          /An error occurred. Answers can't be saved at this time. If the problem persists, please contact the site administrator./i
+        )
+      ).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle historyUpdate API failure', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+
+    historyUpdateApi.mockRejectedValueOnce(new Error('historyUpdate API Error'))
+    const tempMockState = { ...mockStateWithChatHistory }
+
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await userEvent.click(promptButton)
+
+    await waitFor(async () => {
+      const mockError = new Error('historyUpdate API Error')
+      expect(console.error).toHaveBeenCalledWith('Error: ', mockError)
+    })
+  })
+
+  test('Should handled when selected chat item not exists in chat history', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockStateWithChatHistory }
+    tempMockState.currentChat = {
+      id: 'eaedb3b5-d21b-4d02-86c0-524e9b8cacb6',
+      title: 'Summarize Alexander Harrington previous meetings',
+      date: '2024-10-08T10:25:11.970412',
+      messages: [
+        {
+          id: '55bf73d8-2a07-4709-a214-073aab7af3f0',
+          role: 'user',
+          date: '2024-10-08T10:25:13.314496',
+          content: 'Summarize Alexander Harrington previous meetings'
+        }
+      ]
+    }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const promptButton = screen.getByRole('button', { name: /prompt-button/i })
+
+    await act(() => {
+      fireEvent.click(promptButton)
+    })
+
+    await waitFor(() => {
+      const mockError = 'Conversation not found.'
+      expect(console.error).toHaveBeenCalledWith(mockError)
+    })
+  })
+
+  test('Should handle other than (CosmosDBStatus.Working & CosmosDBStatus.NotConfigured) and ChatHistoryLoadingState.Fail', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable = {
+      ...tempMockState.isCosmosDBAvailable,
+      status: CosmosDBStatus.NotWorking
+    }
+    tempMockState.chatHistoryLoadingState = ChatHistoryLoadingState.Fail
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Chat history is not enabled/i)).toBeInTheDocument()
+      const er = CosmosDBStatus.NotWorking + '. Please contact the site administrator.'
+      expect(screen.getByText(er)).toBeInTheDocument()
+    })
+  })
+
+  // re look into this
+  test('Should able perform action(onSend) form Question input component', async () => {
+    userEvent.setup()
+    nonDelayedhistoryGenerateAPIcallMock()
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await act(async () => {
+      await userEvent.click(questionInputtButton)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+      expect(screen.getByText(/response from AI!/i)).toBeInTheDocument()
+    })
+  })
+
+  test('Should able perform action(onSend) form Question input component with existing history item', async () => {
+    userEvent.setup()
+    historyGenerateAPIcallMock()
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockStateWithChatHistory }
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await act(async () => {
+      await userEvent.click(questionInputtButton)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+      expect(screen.getByText(/response from AI content!/i)).toBeInTheDocument()
+    })
+  })
+
+  // For cosmosDB is false
+  test('Should able perform action(onSend) form Question input component if consmosDB false', async () => {
+    userEvent.setup()
+    conversationApiCallMock()
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await act(async () => {
+      await userEvent.click(questionInputtButton)
+    })
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+      expect(await screen.findByText(/response from AI!/i)).toBeInTheDocument()
+    })
+  })
+
+  test('Should able perform action(onSend) form Question input component if consmosDB false', async () => {
+    userEvent.setup()
+    conversationApiCallMock('chat-item-selected')
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockStateWithChatHistory }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await userEvent.click(questionInputtButton)
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('chat-message-container')).toBeInTheDocument()
+      //expect(await screen.findByText(/response from AI content!/i)).toBeInTheDocument();
+    })
+  })
+
+  test('Should handle : If conversaton is not there/equal to the current selected chat', async () => {
+    userEvent.setup()
+    conversationApiCallMock()
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-dummy/i })
+
+    await userEvent.click(questionInputtButton)
+
+    await waitFor(async () => {
+      expect(console.error).toHaveBeenCalledWith('Conversation not found.')
+      expect(screen.queryByTestId('chat-message-container')).not.toBeInTheDocument()
+    })
+  })
+
+  test('Should handle : if conversationApiCallMock API return error object L(221-223)', async () => {
+    userEvent.setup()
+    conversationApiCallMock('error-result')
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await userEvent.click(questionInputtButton)
+
+    await waitFor(async () => {
+      expect(screen.getByText(/error API result/i)).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle : if conversationApiCallMock API return error string ', async () => {
+    userEvent.setup()
+    conversationApiCallMock('error-string-result')
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await userEvent.click(questionInputtButton)
+
+    await waitFor(async () => {
+      expect(screen.getByText(/error API result/i)).toBeInTheDocument()
+    })
+  })
+
+  test('Should handle : if conversationApiCallMock API return in-complete response L(233)', async () => {
+    userEvent.setup()
+    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(() => {})
+    conversationApiCallMock('incomplete-result')
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await userEvent.click(questionInputtButton)
+
+    await waitFor(async () => {
+      expect(consoleLogSpy).toHaveBeenCalledWith('Incomplete message. Continuing...')
+    })
+    consoleLogSpy.mockRestore()
+  })
+
+  test('Should handle : if conversationApiCallMock API failed', async () => {
+    userEvent.setup()
+    mockCallConversationApi.mockRejectedValueOnce(new Error('API Error'))
+    historyUpdateApi.mockResolvedValueOnce({ ok: true })
+    const tempMockState = { ...mockState }
+    tempMockState.isCosmosDBAvailable.cosmosDB = false
+    tempMockState.frontendSettings = {
+      ...tempMockState.frontendSettings,
+      auth_enabled: false
+    }
+    renderWithContext(<Chat setIsVisible={setIsVisible} />, tempMockState)
+    const questionInputtButton = screen.getByRole('button', { name: /question-input/i })
+
+    await userEvent.click(questionInputtButton)
+
+    await waitFor(async () => {
+      expect(
+        screen.getByText(
+          /An error occurred. Please try again. If the problem persists, please contact the site administrator./i
+        )
+      ).toBeInTheDocument()
+    })
+  })
+})
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
index b39e1560b..5daac4d70 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
@@ -1,41 +1,40 @@
 import { useRef, useState, useEffect, useContext, useLayoutEffect } from 'react'
-import { CommandBarButton, IconButton, Dialog, DialogType, Stack } from '@fluentui/react'
-import { SquareRegular, ShieldLockRegular, ErrorCircleRegular } from '@fluentui/react-icons'
+import { CommandBarButton, Dialog, DialogType, Stack } from '@fluentui/react'
+import { SquareRegular } from '@fluentui/react-icons'
 
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import rehypeRaw from 'rehype-raw'
 import uuid from 'react-uuid'
 import { isEmpty } from 'lodash'
-import DOMPurify from 'dompurify'
 
 import styles from './Chat.module.css'
 import TeamAvatar from '../../assets/TeamAvatar.svg'
-import { XSSAllowTags } from '../../constants/xssAllowTags'
 
 import {
-  ChatMessage,
-  ConversationRequest,
-  conversationApi,
-  Citation,
-  ToolMessageContent,
-  ChatResponse,
   getUserInfo,
-  Conversation,
-  historyGenerate,
   historyUpdate,
   historyClear,
+  historyGenerate,
+  conversationApi,
+  ChatMessage,
+  Citation,
   ChatHistoryLoadingState,
   CosmosDBStatus,
-  ErrorMessage
+  ErrorMessage,
+  ConversationRequest,
+  ChatResponse,
+  Conversation
 } from '../../api'
-import { Answer } from '../../components/Answer'
+
 import { QuestionInput } from '../../components/QuestionInput'
 import { ChatHistoryPanel } from '../../components/ChatHistory/ChatHistoryPanel'
 import { AppStateContext } from '../../state/AppProvider'
 import { useBoolean } from '@fluentui/react-hooks'
 import { PromptsSection, PromptType } from '../../components/PromptsSection/PromptsSection'
 
+import { parseErrorMessage } from '../../helpers/helpers'
+import { AuthNotConfigure } from './Components/AuthNotConfigure'
+import { ChatMessageContainer } from './Components/ChatMessageContainer'
+import { CitationPanel } from './Components/CitationPanel'
+
 const enum messageStatus {
   NotRunning = 'Not Running',
   Processing = 'Processing',
@@ -58,6 +57,8 @@ const Chat = (props: any) => {
   const [hideErrorDialog, { toggle: toggleErrorDialog }] = useBoolean(true)
   const [errorMsg, setErrorMsg] = useState<ErrorMessage | null>()
 
+  const [finalMessages, setFinalMessages] = useState<ChatMessage[]>([])
+
   const errorDialogContentProps = {
     type: DialogType.close,
     title: errorMsg?.title,
@@ -284,7 +285,7 @@ const Chat = (props: any) => {
       id: uuid(),
       role: 'user',
       content: question,
-      date: new Date().toISOString(),
+      date: new Date().toISOString()
     }
 
     //api call params set here (generate)
@@ -383,7 +384,9 @@ const Chat = (props: any) => {
                   })
                 }
                 runningText = ''
-              } else if (result.error) {
+              } else {
+                result.error = "There was an error generating a response. Chat history can't be saved at this time."
+                console.error('Error : ', result.error)
                 throw Error(result.error)
               }
             } catch (e) {
@@ -504,6 +507,12 @@ const Chat = (props: any) => {
     return abortController.abort()
   }
 
+  useEffect(() => {
+    if (JSON.stringify(finalMessages) != JSON.stringify(messages)) {
+      setFinalMessages(messages)
+    }
+  }, [messages])
+
   const clearChat = async () => {
     setClearingChat(true)
     if (appStateContext?.state.currentChat?.id && appStateContext?.state.isCosmosDBAvailable.cosmosDB) {
@@ -528,63 +537,8 @@ const Chat = (props: any) => {
     setClearingChat(false)
   }
 
-  const tryGetRaiPrettyError = (errorMessage: string) => {
-    try {
-      // Using a regex to extract the JSON part that contains "innererror"
-      const match = errorMessage.match(/'innererror': ({.*})\}\}/)
-      if (match) {
-        // Replacing single quotes with double quotes and converting Python-like booleans to JSON booleans
-        const fixedJson = match[1]
-          .replace(/'/g, '"')
-          .replace(/\bTrue\b/g, 'true')
-          .replace(/\bFalse\b/g, 'false')
-        const innerErrorJson = JSON.parse(fixedJson)
-        let reason = ''
-        // Check if jailbreak content filter is the reason of the error
-        const jailbreak = innerErrorJson.content_filter_result.jailbreak
-        if (jailbreak.filtered === true) {
-          reason = 'Jailbreak'
-        }
-
-        // Returning the prettified error message
-        if (reason !== '') {
-          return (
-            'The prompt was filtered due to triggering Azure OpenAI’s content filtering system.\n' +
-            'Reason: This prompt contains content flagged as ' +
-            reason +
-            '\n\n' +
-            'Please modify your prompt and retry. Learn more: https://go.microsoft.com/fwlink/?linkid=2198766'
-          )
-        }
-      }
-    } catch (e) {
-      console.error('Failed to parse the error:', e)
-    }
-    return errorMessage
-  }
-
-  const parseErrorMessage = (errorMessage: string) => {
-    let errorCodeMessage = errorMessage.substring(0, errorMessage.indexOf('-') + 1)
-    const innerErrorCue = "{\\'error\\': {\\'message\\': "
-    if (errorMessage.includes(innerErrorCue)) {
-      try {
-        let innerErrorString = errorMessage.substring(errorMessage.indexOf(innerErrorCue))
-        if (innerErrorString.endsWith("'}}")) {
-          innerErrorString = innerErrorString.substring(0, innerErrorString.length - 3)
-        }
-        innerErrorString = innerErrorString.replaceAll("\\'", "'")
-        let newErrorMessage = errorCodeMessage + ' ' + innerErrorString
-        errorMessage = newErrorMessage
-      } catch (e) {
-        console.error('Error parsing inner error message: ', e)
-      }
-    }
-
-    return tryGetRaiPrettyError(errorMessage)
-  }
-
   const newChat = () => {
-    props.setIsVisible(true);
+    props.setIsVisible(true)
     setProcessMessages(messageStatus.Processing)
     setMessages([])
     setIsCitationPanelOpen(false)
@@ -667,9 +621,9 @@ const Chat = (props: any) => {
   }, [AUTH_ENABLED])
 
   useLayoutEffect(() => {
-    const element = document.getElementById("chatMessagesContainer")!;
-    if(element){
-      element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
+    const element = document.getElementById('chatMessagesContainer')!
+    if (element) {
+      element.scroll({ top: element.scrollHeight, behavior: 'smooth' })
     }
   }, [showLoadingMessage, processMessages])
 
@@ -684,18 +638,6 @@ const Chat = (props: any) => {
     }
   }
 
-  const parseCitationFromMessage = (message: ChatMessage) => {
-    if (message?.role && message?.role === 'tool') {
-      try {
-        const toolMessage = JSON.parse(message.content) as ToolMessageContent
-        return toolMessage.citations
-      } catch {
-        return []
-      }
-    }
-    return []
-  }
-
   const disabledButton = () => {
     return (
       isLoading ||
@@ -714,36 +656,11 @@ const Chat = (props: any) => {
         : makeApiRequestWithoutCosmosDB(question, conversationId)
     }
   }
-  
+
   return (
     <div className={styles.container} role="main">
       {showAuthMessage ? (
-        <Stack className={styles.chatEmptyState}>
-          <ShieldLockRegular
-            className={styles.chatIcon}
-            style={{ color: 'darkorange', height: '200px', width: '200px' }}
-          />
-          <h1 className={styles.chatEmptyStateTitle}>Authentication Not Configured</h1>
-          <h2 className={styles.chatEmptyStateSubtitle}>
-            This app does not have authentication configured. Please add an identity provider by finding your app in the{' '}
-            <a href="https://portal.azure.com/" target="_blank">
-              Azure Portal
-            </a>
-            and following{' '}
-            <a
-              href="https://learn.microsoft.com/en-us/azure/app-service/scenario-secure-app-authentication-app-service#3-configure-authentication-and-authorization"
-              target="_blank">
-              these instructions
-            </a>
-            .
-          </h2>
-          <h2 className={styles.chatEmptyStateSubtitle} style={{ fontSize: '20px' }}>
-            <strong>Authentication configuration takes a few minutes to apply. </strong>
-          </h2>
-          <h2 className={styles.chatEmptyStateSubtitle} style={{ fontSize: '20px' }}>
-            <strong>If you deployed in the last 10 minutes, please wait and reload the page after 10 minutes.</strong>
-          </h2>
-        </Stack>
+        <AuthNotConfigure />
       ) : (
         <Stack horizontal className={styles.chatRoot}>
           <div className={styles.chatContainer}>
@@ -751,53 +668,15 @@ const Chat = (props: any) => {
               <Stack className={styles.chatEmptyState}>
                 <img src={ui?.chat_logo ? ui.chat_logo : TeamAvatar} className={styles.chatIcon} aria-hidden="true" />
                 <h1 className={styles.chatEmptyStateTitle}>{ui?.chat_title}</h1>
-                <h2 className={styles.chatEmptyStateSubtitle}>{ui?.chat_description}</h2>
+                <h3 className={styles.chatEmptyStateSubtitle}>{ui?.chat_description}</h3>
               </Stack>
             ) : (
-              <div id="chatMessagesContainer" className={styles.chatMessageStream} style={{ marginBottom: isLoading ? '40px' : '0px' }} role="log">
-                {messages.map((answer, index) => (
-                  <>
-                    {answer.role === 'user' ? (
-                      <div className={styles.chatMessageUser} tabIndex={0}>
-                        <div className={styles.chatMessageUserMessage}>{answer.content}</div>
-                      </div>
-                    ) : answer.role === 'assistant' ? (
-                      <div className={styles.chatMessageGpt}>
-                        <Answer
-                          answer={{
-                            answer: answer.content,
-                            citations: parseCitationFromMessage(messages[index - 1]),
-                            message_id: answer.id,
-                            feedback: answer.feedback
-                          }}
-                          onCitationClicked={c => onShowCitation(c)}
-                        />
-                      </div>
-                    ) : answer.role === ERROR ? (
-                      <div className={styles.chatMessageError}>
-                        <Stack horizontal className={styles.chatMessageErrorContent}>
-                          <ErrorCircleRegular className={styles.errorIcon} style={{ color: 'rgba(182, 52, 67, 1)' }} />
-                          <span>Error</span>
-                        </Stack>
-                        <span className={styles.chatMessageErrorContent}>{answer.content}</span>
-                      </div>
-                    ) : null}
-                  </>
-                ))}
-                {showLoadingMessage && (
-                  <>
-                    <div className={styles.chatMessageGpt}>
-                      <Answer
-                        answer={{
-                          answer: 'Generating answer...',
-                          citations: []
-                        }}
-                        onCitationClicked={() => null}
-                      />
-                    </div>
-                  </>
-                )}
-              </div>
+              <ChatMessageContainer
+                messages={finalMessages}
+                isLoading={isLoading}
+                onShowCitation={onShowCitation}
+                showLoadingMessage={showLoadingMessage}
+              />
             )}
             <Stack horizontal className={styles.promptsContainer}>
               <PromptsSection onClickPrompt={onClickPrompt} isLoading={isLoading} />
@@ -900,46 +779,16 @@ const Chat = (props: any) => {
           </div>
           {/* Citation Panel */}
           {messages && messages.length > 0 && isCitationPanelOpen && activeCitation && (
-            <Stack.Item className={styles.citationPanel} tabIndex={0} role="tabpanel" aria-label="Citations Panel">
-              <Stack
-                aria-label="Citations Panel Header Container"
-                horizontal
-                className={styles.citationPanelHeaderContainer}
-                horizontalAlign="space-between"
-                verticalAlign="center">
-                <span aria-label="Citations" className={styles.citationPanelHeader}>
-                  Citations
-                </span>
-                <IconButton
-                  iconProps={{ iconName: 'Cancel' }}
-                  aria-label="Close citations panel"
-                  onClick={() => setIsCitationPanelOpen(false)}
-                />
-              </Stack>
-              <h5
-                className={styles.citationPanelTitle}
-                tabIndex={0}
-                title={
-                  activeCitation.url && !activeCitation.url.includes('blob.core')
-                    ? activeCitation.url
-                    : activeCitation.title ?? ''
-                }
-                onClick={() => onViewSource(activeCitation)}>
-                {activeCitation.title}
-              </h5>
-              <div tabIndex={0}>
-                <ReactMarkdown
-                  linkTarget="_blank"
-                  className={styles.citationPanelContent}
-                  children={DOMPurify.sanitize(activeCitation.content, { ALLOWED_TAGS: XSSAllowTags })}
-                  remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeRaw]}
-                />
-              </div>
-            </Stack.Item>
+            <CitationPanel
+              IsCitationPanelOpen={setIsCitationPanelOpen}
+              activeCitation={activeCitation}
+              onViewSource={onViewSource}
+            />
           )}
           {appStateContext?.state.isChatHistoryOpen &&
-            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel isLoading={isLoading} />}
+            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
+              <ChatHistoryPanel isLoading={isLoading} />
+            )}
         </Stack>
       )}
     </div>
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Components/AuthNotConfigure.test.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Components/AuthNotConfigure.test.tsx
new file mode 100644
index 000000000..a47a1e4d3
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Components/AuthNotConfigure.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { AuthNotConfigure } from './AuthNotConfigure'
+import styles from '../Chat.module.css'
+
+// Mock the Fluent UI icons
+jest.mock('@fluentui/react-icons', () => ({
+  ShieldLockRegular: () => <div data-testid="shield-lock-icon" />
+}))
+
+describe('AuthNotConfigure Component', () => {
+  it('renders without crashing', () => {
+    render(<AuthNotConfigure />)
+
+    // Check that the icon is rendered
+    const icon = screen.getByTestId('shield-lock-icon')
+    expect(icon).toBeInTheDocument()
+
+    // Check that the titles and subtitles are rendered
+    expect(screen.getByText('Authentication Not Configured')).toBeInTheDocument()
+    expect(screen.getByText(/This app does not have authentication configured./)).toBeInTheDocument()
+
+    // Check the strong text is rendered
+    expect(screen.getByText('Authentication configuration takes a few minutes to apply.')).toBeInTheDocument()
+    expect(screen.getByText(/please wait and reload the page after 10 minutes/i)).toBeInTheDocument()
+  })
+
+  it('renders the Azure portal and instructions links with correct href', () => {
+    render(<AuthNotConfigure />)
+
+    // Check the Azure Portal link
+    const azurePortalLink = screen.getByText('Azure Portal')
+    expect(azurePortalLink).toBeInTheDocument()
+    expect(azurePortalLink).toHaveAttribute('href', 'https://portal.azure.com/')
+    expect(azurePortalLink).toHaveAttribute('target', '_blank')
+
+    // Check the instructions link
+    const instructionsLink = screen.getByText('these instructions')
+    expect(instructionsLink).toBeInTheDocument()
+    expect(instructionsLink).toHaveAttribute(
+      'href',
+      'https://learn.microsoft.com/en-us/azure/app-service/scenario-secure-app-authentication-app-service#3-configure-authentication-and-authorization'
+    )
+    expect(instructionsLink).toHaveAttribute('target', '_blank')
+  })
+
+  
+})
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Components/AuthNotConfigure.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Components/AuthNotConfigure.tsx
new file mode 100644
index 000000000..ac5151182
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Components/AuthNotConfigure.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import {  Stack } from '@fluentui/react'
+import {  ShieldLockRegular } from '@fluentui/react-icons'
+
+import styles from '../Chat.module.css'
+
+export const AuthNotConfigure = ()=>{
+    return (
+        <Stack className={styles.chatEmptyState}>
+          <ShieldLockRegular
+            className={styles.chatIcon}
+            style={{ color: 'darkorange', height: '200px', width: '200px' }}
+          />
+          <h1 className={styles.chatEmptyStateTitle}>Authentication Not Configured</h1>
+          <h2 className={styles.chatEmptyStateSubtitle}>
+            This app does not have authentication configured. Please add an identity provider by finding your app in the{' '}
+            <a href="https://portal.azure.com/" target="_blank">
+              Azure Portal
+            </a>
+            and following{' '}
+            <a
+              href="https://learn.microsoft.com/en-us/azure/app-service/scenario-secure-app-authentication-app-service#3-configure-authentication-and-authorization"
+              target="_blank">
+              these instructions
+            </a>
+            .
+          </h2>
+          <h2 className={styles.chatEmptyStateSubtitle} style={{ fontSize: '20px' }}>
+            <strong>Authentication configuration takes a few minutes to apply. </strong>
+          </h2>
+          <h2 className={styles.chatEmptyStateSubtitle} style={{ fontSize: '20px' }}>
+            <strong>If you deployed in the last 10 minutes, please wait and reload the page after 10 minutes.</strong>
+          </h2>
+        </Stack>
+    )
+}
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Components/ChatMessageContainer.test.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Components/ChatMessageContainer.test.tsx
new file mode 100644
index 000000000..bb470c29f
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Components/ChatMessageContainer.test.tsx
@@ -0,0 +1,178 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ChatMessageContainer } from './ChatMessageContainer';
+import { ChatMessage, Citation } from '../../../api/models';
+import { Answer } from '../../../components/Answer';
+
+jest.mock('../../../components/Answer', () => ({
+    Answer: jest.fn((props: any) => <div>
+        <p>{props.answer.answer}</p>
+        <span>Mock Answer Component</span>
+        {props.answer.answer  == 'Generating answer...' ?
+        <button onClick={() => props.onCitationClicked()}>Mock Citation Loading</button>        :
+        <button onClick={() => props.onCitationClicked({ title: 'Test Citation' })}>Mock Citation</button>
+        }
+        
+    </div>)
+}));
+
+const mockOnShowCitation = jest.fn();
+
+describe('ChatMessageContainer', () => {
+
+    beforeEach(() => {
+        global.fetch = jest.fn();
+        jest.spyOn(console, 'error').mockImplementation(() => { });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    
+
+    const userMessage: ChatMessage = {
+        role: 'user',
+        content: 'User message',
+        id: '1',
+        feedback: undefined,
+        date: new Date().toDateString()
+    };
+
+    const assistantMessage: ChatMessage = {
+        role: 'assistant',
+        content: 'Assistant message',
+        id: '2',
+        feedback: undefined,
+        date: new Date().toDateString()
+    };
+
+    const errorMessage: ChatMessage = {
+        role: 'error',
+        content: 'Error message',
+        id: '3',
+        feedback: undefined,
+        date: new Date().toDateString()
+    };
+
+    it('renders user and assistant messages correctly', () => {
+        render(
+            <ChatMessageContainer
+                messages={[userMessage, assistantMessage]}
+                isLoading={false}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+        );
+
+        // Check if user message is displayed
+        expect(screen.getByText('User message')).toBeInTheDocument();
+
+        // Check if assistant message is displayed via Answer component
+        expect(screen.getByText('Mock Answer Component')).toBeInTheDocument();
+        expect(Answer).toHaveBeenCalledWith(
+            expect.objectContaining({
+                answer: {
+                    answer: 'Assistant message',
+                    citations: [], // No citations since this is the first message
+                    message_id: '2',
+                    feedback: undefined
+                }
+            }),
+            {}
+        );
+    });
+
+    it('renders an error message correctly', () => {
+        render(
+            <ChatMessageContainer
+                messages={[errorMessage]}
+                isLoading={false}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+        );
+
+        // Check if error message is displayed with the error icon
+        expect(screen.getByText('Error')).toBeInTheDocument();
+        expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+
+    it('displays the loading message when showLoadingMessage is true', () => {
+        render(
+            <ChatMessageContainer
+                messages={[]}
+                isLoading={false}
+                showLoadingMessage={true}
+                onShowCitation={mockOnShowCitation}
+            />
+        );
+        // Check if the loading message is displayed via Answer component
+        expect(screen.getByText('Generating answer...')).toBeInTheDocument();
+    });
+
+    it('applies correct margin when loading is true', () => {
+        const { container } = render(
+            <ChatMessageContainer
+                messages={[userMessage, assistantMessage]}
+                isLoading={true}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+        );
+
+        // Verify the margin is applied correctly when loading is true
+        const chatMessagesContainer = container.querySelector('#chatMessagesContainer');
+        expect(chatMessagesContainer).toHaveStyle('margin-bottom: 40px');
+    });
+
+    it('applies correct margin when loading is false', () => {
+        const { container } = render(
+            <ChatMessageContainer
+                messages={[userMessage, assistantMessage]}
+                isLoading={false}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+        );
+
+        // Verify the margin is applied correctly when loading is false
+        const chatMessagesContainer = container.querySelector('#chatMessagesContainer');
+        expect(chatMessagesContainer).toHaveStyle('margin-bottom: 0px');
+    });
+
+
+    it('calls onShowCitation when a citation is clicked', () => {
+        render(
+            <ChatMessageContainer
+                messages={[assistantMessage]}
+                isLoading={false}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+        );
+
+        // Simulate a citation click
+        const citationButton = screen.getByText('Mock Citation');
+        fireEvent.click(citationButton);
+
+        // Check if onShowCitation is called with the correct argument
+        expect(mockOnShowCitation).toHaveBeenCalledWith({ title: 'Test Citation' });
+    });
+
+    it('does not call onShowCitation when citation click is a no-op', () => {
+        render(
+            <ChatMessageContainer
+                messages={[]}
+                isLoading={false}
+                showLoadingMessage={true}
+                onShowCitation={mockOnShowCitation} // No-op function
+            />
+        );
+        // Simulate a citation click
+        const citationButton = screen.getByRole('button', {name : 'Mock Citation Loading'});
+        fireEvent.click(citationButton);
+
+        // Check if onShowCitation is NOT called
+        expect(mockOnShowCitation).not.toHaveBeenCalled();
+    });
+});
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Components/ChatMessageContainer.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Components/ChatMessageContainer.tsx
new file mode 100644
index 000000000..1210e8b38
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Components/ChatMessageContainer.tsx
@@ -0,0 +1,65 @@
+import { useRef, useState, useEffect, useContext, useLayoutEffect } from 'react'
+import styles from '../Chat.module.css';
+import { Answer } from '../../../components/Answer';
+import {parseCitationFromMessage } from '../../../helpers/helpers';
+import { Stack } from '@fluentui/react'
+import {  ErrorCircleRegular } from '@fluentui/react-icons'
+import {Citation , ChatMessage} from '../../../api/models';
+
+interface ChatMessageContainerProps {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    showLoadingMessage: boolean;
+    onShowCitation: (citation: Citation) => void;
+  }
+
+export const ChatMessageContainer = (props : ChatMessageContainerProps)=>{
+    const [ASSISTANT, TOOL, ERROR] = ['assistant', 'tool', 'error']
+
+    return (
+        <div id="chatMessagesContainer" className={styles.chatMessageStream} style={{ marginBottom: props.isLoading ? '40px' : '0px' }} role="log">
+        {props.messages.map((answer : any, index : number) => (
+          <>
+            {answer.role === 'user' ? (
+              <div className={styles.chatMessageUser} tabIndex={0}>
+                <div className={styles.chatMessageUserMessage}>{answer.content}</div>
+              </div>
+            ) : answer.role === 'assistant' ? (
+              <div className={styles.chatMessageGpt}>
+                <Answer
+                  answer={{
+                    answer: answer.content,
+                    citations: parseCitationFromMessage(props.messages[index - 1]),
+                    message_id: answer.id,
+                    feedback: answer.feedback
+                  }}
+                  onCitationClicked={c => props.onShowCitation(c)}
+                />
+              </div>
+            ) : answer.role === ERROR ? (
+              <div className={styles.chatMessageError}>
+                <Stack horizontal className={styles.chatMessageErrorContent}>
+                  <ErrorCircleRegular className={styles.errorIcon} style={{ color: 'rgba(182, 52, 67, 1)' }} />
+                  <span>Error</span>
+                </Stack>
+                <span className={styles.chatMessageErrorContent}>{answer.content}</span>
+              </div>
+            ) : null}
+          </>
+        ))}
+        {props.showLoadingMessage && (
+          <>
+            <div className={styles.chatMessageGpt}>
+              <Answer
+                answer={{
+                  answer: 'Generating answer...',
+                  citations: []
+                }}
+                onCitationClicked={() => null}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.test.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.test.tsx
new file mode 100644
index 000000000..4e14edf65
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.test.tsx
@@ -0,0 +1,133 @@
+// CitationPanel.test.tsx
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { CitationPanel } from './CitationPanel';
+import { Citation } from '../../../api/models';
+
+
+jest.mock('remark-gfm', () => jest.fn());
+jest.mock('rehype-raw', () => jest.fn());
+
+
+
+const mockCitation = {
+    id: '123',
+    title: 'Sample Citation',
+    content: 'This is a sample citation content.',
+    url: 'https://example.com/sample-citation',
+    filepath: "path",
+    metadata: "",
+    chunk_id: "",
+    reindex_id: ""
+
+};
+
+describe('CitationPanel', () => {
+    const mockIsCitationPanelOpen = jest.fn();
+    const mockOnViewSource = jest.fn();
+
+    beforeEach(() => {
+        // Reset mocks before each test
+        mockIsCitationPanelOpen.mockClear();
+        mockOnViewSource.mockClear();
+    });
+
+    test('renders CitationPanel with citation title and content', () => {
+        render(
+            <CitationPanel
+                activeCitation={mockCitation}
+                IsCitationPanelOpen={mockIsCitationPanelOpen}
+                onViewSource={mockOnViewSource}
+            />
+        );
+
+        // Check if title is rendered
+        expect(screen.getByRole('heading', { name: /Sample Citation/i })).toBeInTheDocument();
+
+        // Check if content is rendered
+        //expect(screen.getByText(/This is a sample citation content/i)).toBeInTheDocument();
+    });
+
+    test('calls IsCitationPanelOpen with false when close button is clicked', () => {
+        render(
+            <CitationPanel
+                activeCitation={mockCitation}
+                IsCitationPanelOpen={mockIsCitationPanelOpen}
+                onViewSource={mockOnViewSource}
+            />
+        );
+
+        const closeButton = screen.getByRole('button', { name: /Close citations panel/i });
+        fireEvent.click(closeButton);
+
+        expect(mockIsCitationPanelOpen).toHaveBeenCalledWith(false);
+    });
+
+    test('calls onViewSource with citation when title is clicked', () => {
+        render(
+            <CitationPanel
+                activeCitation={mockCitation}
+                IsCitationPanelOpen={mockIsCitationPanelOpen}
+                onViewSource={mockOnViewSource}
+            />
+        );
+
+        const title = screen.getByRole('heading', { name: /Sample Citation/i });
+        fireEvent.click(title);
+
+        expect(mockOnViewSource).toHaveBeenCalledWith(mockCitation);
+    });
+
+    test('renders the title correctly and sets the correct title attribute for non-blob URL', () => {
+        render(
+            <CitationPanel
+                activeCitation={mockCitation}
+                IsCitationPanelOpen={mockIsCitationPanelOpen}
+                onViewSource={mockOnViewSource}
+            />
+        );
+
+        const titleElement = screen.getByRole('heading', { name: /Sample Citation/i });
+
+        // Ensure the title is rendered
+        expect(titleElement).toBeInTheDocument();
+
+        // Ensure the title attribute is set to the URL since it's not a blob URL
+        expect(titleElement).toHaveAttribute('title', 'https://example.com/sample-citation');
+
+        // Trigger the onClick event and ensure onViewSource is called with the correct citation
+        fireEvent.click(titleElement);
+        expect(mockOnViewSource).toHaveBeenCalledWith(mockCitation);
+    });
+
+    test('renders the title correctly and sets the title attribute to the citation title for blob URL', () => {
+
+        const mockCitationWithBlobUrl: Citation = {
+            ...mockCitation,
+            title: 'Test Citation with Blob URL',
+            url: 'https://blob.core.example.com/resource',
+            content: '',
+        };
+        render(
+            <CitationPanel
+                activeCitation={mockCitationWithBlobUrl}
+                IsCitationPanelOpen={mockIsCitationPanelOpen}
+                onViewSource={mockOnViewSource}
+            />
+        );
+
+
+        const titleElement = screen.getByRole('heading', { name: /Test Citation with Blob URL/i });
+
+        // Ensure the title is rendered
+        expect(titleElement).toBeInTheDocument();
+
+        // Ensure the title attribute is set to the citation title since the URL contains "blob.core"
+        expect(titleElement).toHaveAttribute('title', 'Test Citation with Blob URL');
+
+        // Trigger the onClick event and ensure onViewSource is called with the correct citation
+        fireEvent.click(titleElement);
+        expect(mockOnViewSource).toHaveBeenCalledWith(mockCitationWithBlobUrl);
+    });
+
+});
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.tsx
new file mode 100644
index 000000000..e0f10e170
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.tsx
@@ -0,0 +1,54 @@
+import { Stack, IconButton } from '@fluentui/react';
+import ReactMarkdown from 'react-markdown';
+import DOMPurify from 'dompurify';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { XSSAllowTags } from '../../../constants/xssAllowTags';
+import styles from '../Chat.module.css';
+
+import {Citation} from '../../../api/models'
+
+interface CitationPanelProps {
+  activeCitation: Citation;
+  IsCitationPanelOpen: (isOpen: boolean) => void;
+  onViewSource: (citation: Citation) => void;
+}
+
+export const CitationPanel: React.FC<CitationPanelProps> = ({ activeCitation, IsCitationPanelOpen, onViewSource }) => {
+  return (
+    <Stack.Item className={styles.citationPanel} tabIndex={0} role="tabpanel" aria-label="Citations Panel">
+      <Stack
+        aria-label="Citations Panel Header Container"
+        horizontal
+        className={styles.citationPanelHeaderContainer}
+        horizontalAlign="space-between"
+        verticalAlign="center">
+        <span aria-label="Citations" className={styles.citationPanelHeader}>
+          Citations
+        </span>
+        <IconButton
+          iconProps={{ iconName: 'Cancel' }}
+          aria-label="Close citations panel"
+          onClick={() => IsCitationPanelOpen(false)}
+        />
+      </Stack>
+      <h5
+        className={styles.citationPanelTitle}
+        tabIndex={0}
+        title={activeCitation.url && !activeCitation.url.includes('blob.core') ? activeCitation.url : activeCitation.title ?? ''}
+        onClick={() => onViewSource(activeCitation)}>
+        {activeCitation.title}
+      </h5>
+      <div tabIndex={0}>
+        <ReactMarkdown
+          linkTarget="_blank"
+          className={styles.citationPanelContent}
+          //children={DOMPurify.sanitize(activeCitation.content, { ALLOWED_TAGS: XSSAllowTags })}
+          children={activeCitation.content}
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+        />
+      </div>
+    </Stack.Item>
+  );
+};
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
index abcbbfab1..754ef9795 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
@@ -179,6 +179,7 @@
   height: 100%; */
   display: flex;
   flex-direction: column;
+  padding-top : 10px ;
 }
 
 .pivotContainer > div {
@@ -316,4 +317,11 @@
       background-color: Window;
       color: WindowText;
   }
+
+  .selectedName{
+    border-radius:25px;
+    border: 2px solid WindowText;
+    background-color: Window;
+    color: WindowText;
+  }
 }
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.test.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.test.tsx
new file mode 100644
index 000000000..78f19c9a6
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.test.tsx
@@ -0,0 +1,644 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { Dialog } from '@fluentui/react'
+import { getpbi, getUserInfo } from '../../api/api'
+import { AppStateContext } from '../../state/AppProvider'
+import Layout from './Layout'
+import Cards from '../../components/Cards/Cards'
+//import { renderWithContext } from '../../test/test.utils'
+import { HistoryButton } from '../../components/common/Button'
+import { CodeJsRectangle16Filled } from '@fluentui/react-icons'
+
+// Create the Mocks
+
+jest.mock('remark-gfm', () => () => {})
+jest.mock('rehype-raw', () => () => {})
+jest.mock('react-uuid', () => () => {})
+
+const mockUsers = {
+  ClientId: '1',
+  ClientName: 'Client 1',
+  NextMeeting: 'Test Meeting 1',
+  NextMeetingTime: '10:00',
+  AssetValue: 10000,
+  LastMeeting: 'Last Meeting 1',
+  ClientSummary: 'Summary for User One',
+  chartUrl: ''
+}
+
+jest.mock('../../components/Cards/Cards', () => {
+  return jest.fn((props: any) => (
+    <div data-testid="user-card-mock" onClick={() => props.onCardClick(mockUsers)}>
+      Mocked Card Component
+    </div>
+  ))
+})
+
+jest.mock('../chat/Chat', () => {
+  const Chat = () => <div data-testid="Chat-component">Mocked Chat Component</div>
+  return Chat
+})
+
+jest.mock('../../api/api', () => ({
+  getpbi: jest.fn(),
+  getUsers: jest.fn(),
+  getUserInfo: jest.fn()
+}))
+
+const mockClipboard = {
+  writeText: jest.fn().mockResolvedValue(Promise.resolve())
+}
+
+const mockDispatch = jest.fn()
+
+const renderComponent = (appState: any) => {
+  return render(
+    <MemoryRouter>
+      <AppStateContext.Provider value={{ state: appState, dispatch: mockDispatch }}>
+        <Layout />
+      </AppStateContext.Provider>
+    </MemoryRouter>
+  )
+}
+
+describe('Layout Component', () => {
+  beforeAll(() => {
+    Object.defineProperty(navigator, 'clipboard', {
+      value: mockClipboard,
+      writable: true
+    })
+    global.fetch = mockDispatch
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  //-------//
+
+  // Test--Start //
+
+  test('renders layout with welcome message', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { cosmosDB: false, status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Welcome Back, Test User/i)).toBeInTheDocument()
+      expect(screen.getByText(/Welcome Back, Test User/i)).toBeVisible()
+    })
+  })
+
+  test('fetches user info', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { cosmosDB: false, status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(getpbi).toHaveBeenCalledTimes(1)
+    expect(getUserInfo).toHaveBeenCalledTimes(1)
+  })
+
+  test('updates share label on window resize', async () => {
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(screen.getByText('Share')).toBeInTheDocument()
+
+    window.innerWidth = 400
+    window.dispatchEvent(new Event('resize'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('Share')).toBeNull()
+    })
+
+    window.innerWidth = 480
+    window.dispatchEvent(new Event('resize'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('Share')).not.toBeNull()
+    })
+
+    window.innerWidth = 600
+    window.dispatchEvent(new Event('resize'))
+
+    await waitFor(() => {
+      expect(screen.getByText('Share')).toBeInTheDocument()
+    })
+  })
+
+  test('updates Hide chat history', async () => {
+    const appState = {
+      isChatHistoryOpen: true,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(screen.getByText('Hide chat history')).toBeInTheDocument()
+  })
+
+  test('check the website tile', async () => {
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App title', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(screen.getByText('Test App title')).toBeVisible()
+    expect(screen.getByText('Test App title')).not.toBe('{{ title }}')
+    expect(screen.getByText('Test App title')).not.toBeNaN()
+  })
+
+  test('check the welcomeCard', async () => {
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App title', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(screen.getByText('Select a client')).toBeVisible()
+    expect(
+      screen.getByText(
+        'You can ask questions about their portfolio details and previous conversations or view their profile.'
+      )
+    ).toBeVisible()
+  })
+
+  test('check the Loader', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: true,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(screen.getByText('Please wait.....!')).toBeVisible()
+  })
+
+  test('copies the URL when Share button is clicked', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const shareButton = screen.getByText('Share')
+    expect(shareButton).toBeInTheDocument()
+    fireEvent.click(shareButton)
+
+    const copyButton = await screen.findByRole('button', { name: /copy/i })
+    fireEvent.click(copyButton)
+
+    await waitFor(() => {
+      expect(mockClipboard.writeText).toHaveBeenCalledWith(window.location.href)
+      expect(mockClipboard.writeText).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  test('should log error when getpbi fails', async () => {
+    ;(getpbi as jest.Mock).mockRejectedValueOnce(new Error('API Error'))
+    const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    await waitFor(() => {
+      expect(getpbi).toHaveBeenCalled()
+    })
+
+    const mockError = new Error('API Error')
+
+    expect(console.error).toHaveBeenCalledWith('Error fetching PBI url:', mockError)
+
+    consoleErrorMock.mockRestore()
+  })
+
+  test('should log error when getUderInfo fails', async () => {
+    ;(getUserInfo as jest.Mock).mockRejectedValue(new Error())
+
+    const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'Available' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    await waitFor(() => {
+      expect(getUserInfo).toHaveBeenCalled()
+    })
+
+    const mockError = new Error()
+
+    expect(console.error).toHaveBeenCalledWith('Error fetching user info: ', mockError)
+
+    consoleErrorMock.mockRestore()
+  })
+
+  test('handles card click and updates context with selected user', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const userCard = screen.getByTestId('user-card-mock')
+
+    await act(() => {
+      fireEvent.click(userCard)
+    })
+
+    expect(screen.getByText(/Client 1/i)).toBeVisible()
+  })
+
+  test('test Dialog', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const MockShare = screen.getAllByRole('button')[1]
+    fireEvent.click(MockShare)
+
+    const MockDilog = screen.getByLabelText('Close')
+
+    await act(() => {
+      fireEvent.click(MockDilog)
+    })
+
+    expect(MockDilog).not.toBeVisible()
+  })
+
+  test('test History button', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const MockShare = screen.getByText('Show chat history')
+
+    await act(() => {
+      fireEvent.click(MockShare)
+    })
+
+    expect(MockShare).not.toHaveTextContent('Hide chat history')
+  })
+
+  test('test Copy button', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const MockShare = screen.getAllByRole('button')[1]
+    fireEvent.click(MockShare)
+
+    const CopyShare = screen.getByLabelText('Copy')
+    await act(() => {
+      fireEvent.keyDown(CopyShare, { key: 'Enter' })
+    })
+
+    expect(CopyShare).not.toHaveTextContent('Copy')
+  })
+
+  test('test logo', () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const img = screen.getByAltText('')
+
+    expect(img).not.toHaveAttribute('src', 'test-logo.svg')
+  })
+
+  test('test getUserInfo', () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'nameinfo', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(screen.getByText(/Welcome Back,/i)).toBeInTheDocument()
+    expect(screen.getByText(/Welcome Back,/i)).toBeVisible()
+  })
+
+  test('test Spinner', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appStatetrue = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: true,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appStatetrue)
+
+    const spinner = screen.getByText('Please wait.....!')
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: undefined,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    expect(spinner).toBeVisible()
+  })
+
+  test('test Span', async () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+    renderComponent(appState)
+    const userCard = screen.getByTestId('user-card-mock')
+    await act(() => {
+      fireEvent.click(userCard)
+    })
+
+    expect(screen.getByText('Client 1')).toBeInTheDocument()
+    expect(screen.getByText('Client 1')).not.toBeNull()
+  })
+
+  test('test Copy button Condication', () => {
+    ;(getpbi as jest.Mock).mockResolvedValue('https://mock-pbi-url.com')
+    ;(getUserInfo as jest.Mock).mockResolvedValue([{ user_claims: [{ typ: 'name', val: 'Test User' }] }])
+
+    const appState = {
+      isChatHistoryOpen: false,
+      frontendSettings: {
+        ui: { logo: 'test-logo.svg', title: 'Test App', show_share_button: true }
+      },
+      isCosmosDBAvailable: { status: 'CosmosDB is configured and working' },
+      isLoader: false,
+      chatHistoryLoadingState: 'idle',
+      chatHistory: [],
+      filteredChatHistory: [],
+      currentChat: null,
+      error: null,
+      activeUserId: null
+    }
+
+    renderComponent(appState)
+
+    const MockShare = screen.getAllByRole('button')[1]
+    fireEvent.click(MockShare)
+
+    const CopyShare = screen.getByLabelText('Copy')
+    fireEvent.keyDown(CopyShare, { key: 'E' })
+
+    expect(CopyShare).toHaveTextContent('Copy')
+  })
+})
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
index 7681c263f..60ddfba59 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
@@ -12,13 +12,11 @@ import Chat from '../chat/Chat' // Import the Chat component
 import { AppStateContext } from '../../state/AppProvider'
 import { getUserInfo, getpbi } from '../../api'
 import { User } from '../../types/User'
-import TickIcon  from '../../assets/TickIcon.svg'
+import TickIcon from '../../assets/TickIcon.svg'
 import DismissIcon from '../../assets/Dismiss.svg'
 import welcomeIcon from '../../assets/welcomeIcon.png'
-import styles from './Layout.module.css';
-import SpinnerComponent from '../../components/Spinner/Spinner';
-
-
+import styles from './Layout.module.css'
+import { SpinnerComponent } from '../../components/Spinner/SpinnerComponent'
 
 const Layout = () => {
   // const [contentType, setContentType] = useState<string | null>(null);
@@ -38,7 +36,7 @@ const Layout = () => {
   const [name, setName] = useState<string>('')
 
   const [pbiurl, setPbiUrl] = useState<string>('')
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false)
   useEffect(() => {
     const fetchpbi = async () => {
       try {
@@ -53,19 +51,25 @@ const Layout = () => {
   }, [])
 
 
+  const resetClientId= ()=>{
+    appStateContext?.dispatch({ type: 'RESET_CLIENT_ID' });
+    setSelectedUser(null);
+    setShowWelcomeCard(true);
+  }
+
   const closePopup = () => {
-    setIsVisible(!isVisible);
-  };
+    setIsVisible(!isVisible)
+  }
 
   useEffect(() => {
     if (isVisible) {
       const timer = setTimeout(() => {
-        setIsVisible(false);
-      }, 4000); // Popup will disappear after 3 seconds
+        setIsVisible(false)
+      }, 4000) // Popup will disappear after 3 seconds
 
-      return () => clearTimeout(timer); // Cleanup the timer on component unmount
+      return () => clearTimeout(timer) // Cleanup the timer on component unmount
     }
-  }, [isVisible]);
+  }, [isVisible])
 
   const handleCardClick = (user: User) => {
     setSelectedUser(user)
@@ -121,7 +125,6 @@ const Layout = () => {
   useEffect(() => {
     getUserInfo()
       .then(res => {
-        console.log('User info: ', res)
         const name: string = res[0].user_claims.find((claim: any) => claim.typ === 'name')?.val ?? ''
         setName(name)
       })
@@ -137,27 +140,31 @@ const Layout = () => {
 
   return (
     <div className={styles.layout}>
-       {isVisible && (
+      {isVisible && (
         <div className={styles.popupContainer}>
           <div className={styles.popupContent}>
             <div className={styles.popupText}>
-              <div className={styles.headerText}><span className={styles.checkmark}>
-                <img alt="check mark" src={TickIcon} /></span>Chat saved
-                <img alt="close icon" src={DismissIcon} className={styles.closeButton} onClick={closePopup}/>
+              <div className={styles.headerText}>
+                <span className={styles.checkmark}>
+                  <img alt="check mark" src={TickIcon} />
+                </span>
+                Chat saved
+                <img alt="close icon" src={DismissIcon} className={styles.closeButton} onClick={closePopup} />
+              </div>
+              <div className={styles.popupSubtext}>
+                <span className={styles.popupMsg}>Your chat history has been saved successfully!</span>
               </div>
-              <div className={styles.popupSubtext}><span className={styles.popupMsg}>Your chat history has been saved successfully!</span></div>
             </div>
-            
           </div>
         </div>
-    )}
+      )}
       <SpinnerComponent
         loading={appStateContext?.state.isLoader != undefined ? appStateContext?.state.isLoader : false}
         label="Please wait.....!"
       />
       <div className={styles.cardsColumn}>
         <div className={styles.selectClientHeading}>
-          <h3 className={styles.meeting}>Upcoming meetings</h3>
+          <h2 className={styles.meeting}>Upcoming meetings</h2>
         </div>
 
         <Cards onCardClick={handleCardClick} />
@@ -167,9 +174,9 @@ const Layout = () => {
           <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
             <Stack horizontal verticalAlign="center">
               <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
-              <Link to="/" className={styles.headerTitleContainer}>
-                <h1 className={styles.headerTitle}>{ui?.title}</h1>
-              </Link>
+              <div className={styles.headerTitleContainer} onClick={resetClientId} onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? resetClientId() : null)} tabIndex={-1}>
+                <h2 className={styles.headerTitle} tabIndex={0}>{ui?.title}</h2>
+              </div>
             </Stack>
             <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
               {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
@@ -212,9 +219,9 @@ const Layout = () => {
                   <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
                 </div>
               )}
-              <Pivot defaultSelectedKey="chat">
+              <Pivot defaultSelectedKey="chat" className='tabContainer' style={{ paddingTop : 10 }}>
                 <PivotItem headerText="Chat" itemKey="chat">
-                  <Chat setIsVisible={setIsVisible}/>
+                  <Chat setIsVisible={setIsVisible} />
                 </PivotItem>
                 <PivotItem headerText="Client 360 Profile" itemKey="profile">
                   <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
diff --git a/ClientAdvisor/App/frontend/src/state/AppProvider.tsx b/ClientAdvisor/App/frontend/src/state/AppProvider.tsx
index d0166462d..051db7224 100644
--- a/ClientAdvisor/App/frontend/src/state/AppProvider.tsx
+++ b/ClientAdvisor/App/frontend/src/state/AppProvider.tsx
@@ -1,6 +1,14 @@
 import React, { createContext, ReactNode, useEffect, 
   useReducer } from 'react'
 
+import {
+  frontendSettings,
+  historyEnsure,
+  historyList,
+  // UserSelectRequest
+
+} from '../api'
+
 import {
   ChatHistoryLoadingState,
   Conversation,
@@ -8,12 +16,9 @@ import {
   CosmosDBStatus,
   Feedback,
   FrontendSettings,
-  frontendSettings,
-  historyEnsure,
-  historyList,
   // UserSelectRequest
 
-} from '../api'
+} from '../api/models'
 
 import { appStateReducer } from './AppReducer'
 
@@ -51,7 +56,8 @@ export type Action =
   | { type: 'GET_FEEDBACK_STATE'; payload: string }
   | { type: 'UPDATE_CLIENT_ID'; payload: string }
   | { type: 'SET_IS_REQUEST_INITIATED'; payload: boolean }
-  | { type: 'TOGGLE_LOADER' };
+  | { type: 'TOGGLE_LOADER' }
+  | { type: 'RESET_CLIENT_ID'};
 
 const initialState: AppState = {
   isChatHistoryOpen: false,
diff --git a/ClientAdvisor/App/frontend/src/state/AppReducer.tsx b/ClientAdvisor/App/frontend/src/state/AppReducer.tsx
index 21a126dab..03a778cc2 100644
--- a/ClientAdvisor/App/frontend/src/state/AppReducer.tsx
+++ b/ClientAdvisor/App/frontend/src/state/AppReducer.tsx
@@ -80,6 +80,8 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
       return {...state, isRequestInitiated : action.payload}
     case 'TOGGLE_LOADER':
       return {...state, isLoader : !state.isLoader}
+    case 'RESET_CLIENT_ID':
+      return {...state, clientId: ''}
     default:
       return state
   }
diff --git a/ClientAdvisor/App/frontend/src/test/TestProvider.tsx b/ClientAdvisor/App/frontend/src/test/TestProvider.tsx
new file mode 100644
index 000000000..97a65cf68
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/test/TestProvider.tsx
@@ -0,0 +1,26 @@
+// AppProvider.tsx
+import React, { createContext, useReducer, ReactNode } from 'react';
+import { Conversation, ChatHistoryLoadingState } from '../api/models';
+// Define the AppState interface
+export interface AppState {
+  chatHistory: Conversation[];
+  isCosmosDBAvailable: { cosmosDB: boolean; status: string };
+  isChatHistoryOpen: boolean;
+  filteredChatHistory: Conversation[];
+  currentChat: Conversation | null;
+  frontendSettings: Record<string, unknown>;
+  feedbackState: Record<string, unknown>;
+  clientId: string;
+  isRequestInitiated: boolean;
+  isLoader: boolean;
+  chatHistoryLoadingState: ChatHistoryLoadingState;
+}
+
+// Define the context
+export const AppStateContext = createContext<{
+  state: AppState;
+  dispatch: React.Dispatch<any>;
+}>({
+  state: {} as AppState,
+  dispatch: () => {},
+});
diff --git a/ClientAdvisor/App/frontend/src/test/setupTests.ts b/ClientAdvisor/App/frontend/src/test/setupTests.ts
new file mode 100644
index 000000000..3f517be72
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/test/setupTests.ts
@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom'; // For jest-dom matchers like toBeInTheDocument
+
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+initializeIcons();
+
+import { server } from '../mocks/server';
+
+// Establish API mocking before all tests
+beforeAll(() => server.listen());
+
+// Reset any request handlers that are declared in a test
+afterEach(() => server.resetHandlers());
+
+// Clean up after the tests are finished
+afterAll(() => server.close());
+
+// Mock IntersectionObserver
+class IntersectionObserverMock {
+  callback: IntersectionObserverCallback;
+  options: IntersectionObserverInit;
+
+  root: Element | null = null; // Required property
+  rootMargin: string = '0px'; // Required property
+  thresholds: number[] = [0]; // Required property
+
+  constructor(callback: IntersectionObserverCallback, options: IntersectionObserverInit) {
+    this.callback = callback;
+    this.options = options;
+  }
+
+  observe = jest.fn((target: Element) => {
+    // Simulate intersection with an observer instance
+    this.callback([{ isIntersecting: true }] as IntersectionObserverEntry[], this as IntersectionObserver);
+  });
+
+  unobserve = jest.fn();
+  disconnect = jest.fn(); // Required method
+  takeRecords = jest.fn(); // Required method
+}
+
+// Store the original IntersectionObserver
+const originalIntersectionObserver = window.IntersectionObserver;
+
+beforeAll(() => {
+  window.IntersectionObserver = IntersectionObserverMock as any;
+});
+
+afterAll(() => {
+  // Restore the original IntersectionObserver
+  window.IntersectionObserver = originalIntersectionObserver;
+});
+
+
+
+
+
+
+
+
diff --git a/ClientAdvisor/App/frontend/src/test/test.utils.tsx b/ClientAdvisor/App/frontend/src/test/test.utils.tsx
new file mode 100644
index 000000000..f980523aa
--- /dev/null
+++ b/ClientAdvisor/App/frontend/src/test/test.utils.tsx
@@ -0,0 +1,35 @@
+// test-utils.tsx
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { AppStateContext } from '../state/AppProvider';
+import { Conversation, ChatHistoryLoadingState } from '../api/models'; 
+// Default mock state
+const defaultMockState = {
+  chatHistory: [],
+  isCosmosDBAvailable: { cosmosDB: true, status: 'success' },
+  isChatHistoryOpen: true,
+  filteredChatHistory: [],
+  currentChat: null,
+  frontendSettings: {},
+  feedbackState: {},
+  clientId: '',
+  isRequestInitiated: false,
+  isLoader: false,
+  chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
+};
+
+// Create a custom render function
+const renderWithContext = (
+  component: React.ReactElement,
+  contextState = {}
+): RenderResult => {
+  const state = { ...defaultMockState, ...contextState };
+  return render(
+    <AppStateContext.Provider value={{ state, dispatch: jest.fn() }}>
+      {component}
+    </AppStateContext.Provider>
+  );
+};
+
+export * from '@testing-library/react';
+export { renderWithContext };
diff --git a/ClientAdvisor/App/frontend/tsconfig.json b/ClientAdvisor/App/frontend/tsconfig.json
index f117a3d18..962fb6e49 100644
--- a/ClientAdvisor/App/frontend/tsconfig.json
+++ b/ClientAdvisor/App/frontend/tsconfig.json
@@ -5,7 +5,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
@@ -15,9 +15,16 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "typeRoots": ["node_modules/@types"],
+    // "typeRoots": [
+    //   "./node_modules/@types" // Ensure Jest types are found
+    // ],
     "types": ["vite/client", "jest", "mocha", "node"],
     "noUnusedLocals": false
   },
-  "include": ["src"],
+  "include": [
+    "src", // Your source files
+    "testMock", // Include your mocks if necessary
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/ClientAdvisor/App/requirements-dev.txt b/ClientAdvisor/App/requirements-dev.txt
index b4eac12d8..9c8cdf4f7 100644
--- a/ClientAdvisor/App/requirements-dev.txt
+++ b/ClientAdvisor/App/requirements-dev.txt
@@ -12,3 +12,6 @@ gunicorn==20.1.0
 quart-session==3.0.0
 pymssql==2.3.0
 httpx==0.27.0
+flake8==7.1.1
+black==24.8.0
+autoflake==2.3.1
diff --git a/ClientAdvisor/App/requirements.txt b/ClientAdvisor/App/requirements.txt
index a921be2a0..e97a6a961 100644
--- a/ClientAdvisor/App/requirements.txt
+++ b/ClientAdvisor/App/requirements.txt
@@ -12,3 +12,6 @@ gunicorn==20.1.0
 quart-session==3.0.0
 pymssql==2.3.0
 httpx==0.27.0
+flake8==7.1.1
+black==24.8.0
+autoflake==2.3.1
diff --git a/ClientAdvisor/App/tools/data_collection.py b/ClientAdvisor/App/tools/data_collection.py
index 901b8be20..13cbed260 100644
--- a/ClientAdvisor/App/tools/data_collection.py
+++ b/ClientAdvisor/App/tools/data_collection.py
@@ -2,34 +2,33 @@
 import sys
 import asyncio
 import json
+import app
 
 from dotenv import load_dotenv
 
-#import the app.py module to gain access to the methods to construct payloads and
-#call the API through the sdk
+# import the app.py module to gain access to the methods to construct payloads and
+# call the API through the sdk
 
 # Add parent directory to sys.path
-sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
-
-import app
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), "..")))
 
-#function to enable loading of the .env file into the global variables of the app.py module
 
-def load_env_into_module(module_name, prefix=''):
+def load_env_into_module(module_name, prefix=""):
     load_dotenv()
     module = __import__(module_name)
     for key, value in os.environ.items():
         if key.startswith(prefix):
-            setattr(module, key[len(prefix):], value)
+            setattr(module, key[len(prefix) :], value)
+
 
 load_env_into_module("app")
 
-#some settings required in app.py
+# some settings required in app.py
 
 app.SHOULD_STREAM = False
 app.SHOULD_USE_DATA = app.should_use_data()
 
-#format:
+# format:
 """
 [
   {
@@ -40,71 +39,65 @@ def load_env_into_module(module_name, prefix=''):
 
 generated_data_path = r"path/to/qa_input_file.json"
 
-with open(generated_data_path, 'r') as file:
+with open(generated_data_path, "r") as file:
     data = json.load(file)
 
 
 """
 Process a list of q(and a) pairs outputting to a file as we go.
 """
-async def process(data: list, file):
-  for qa_pairs_obj in data:
-      qa_pairs = qa_pairs_obj["qa_pairs"]
-      for qa_pair in qa_pairs:
-          question = qa_pair["question"]
-          messages = [{"role":"user", "content":question}]
-
-          print("processing question "+question)
-
-          request = {"messages":messages, "id":"1"}
 
-          response = await app.complete_chat_request(request)
 
-          #print(json.dumps(response))
-
-          messages = response["choices"][0]["messages"]
-
-          tool_message = None
-          assistant_message = None
-
-          for message in messages:
-            if message["role"] == "tool":
-              tool_message = message["content"]
-            elif message["role"] == "assistant":
-              assistant_message = message["content"]
-            else:
-              raise ValueError("unknown message role")
-
-          #construct data for ai studio evaluation
+async def process(data: list, file):
+    for qa_pairs_obj in data:
+        qa_pairs = qa_pairs_obj["qa_pairs"]
+        for qa_pair in qa_pairs:
+            question = qa_pair["question"]
+            messages = [{"role": "user", "content": question}]
 
-          user_message = {"role":"user", "content":question}
-          assistant_message = {"role":"assistant", "content":assistant_message}
+            print("processing question " + question)
 
-          #prepare citations
-          citations = json.loads(tool_message)
-          assistant_message["context"] = citations
+            request = {"messages": messages, "id": "1"}
 
-          #create output
-          messages = []
-          messages.append(user_message)
-          messages.append(assistant_message)
+            response = await app.complete_chat_request(request)
 
-          evaluation_data = {"messages":messages}
+            # print(json.dumps(response))
 
-          #incrementally write out to the jsonl file
-          file.write(json.dumps(evaluation_data)+"\n")
-          file.flush()
+            messages = response["choices"][0]["messages"]
 
+            tool_message = None
+            assistant_message = None
 
-evaluation_data_file_path = r"path/to/output_file.jsonl"  
+            for message in messages:
+                if message["role"] == "tool":
+                    tool_message = message["content"]
+                elif message["role"] == "assistant":
+                    assistant_message = message["content"]
+                else:
+                    raise ValueError("unknown message role")
 
-with open(evaluation_data_file_path, "w") as file:
-  asyncio.run(process(data, file))
+            # construct data for ai studio evaluation
 
+            user_message = {"role": "user", "content": question}
+            assistant_message = {"role": "assistant", "content": assistant_message}
 
+            # prepare citations
+            citations = json.loads(tool_message)
+            assistant_message["context"] = citations
 
+            # create output
+            messages = []
+            messages.append(user_message)
+            messages.append(assistant_message)
 
+            evaluation_data = {"messages": messages}
 
+            # incrementally write out to the jsonl file
+            file.write(json.dumps(evaluation_data) + "\n")
+            file.flush()
 
 
+evaluation_data_file_path = r"path/to/output_file.jsonl"
 
+with open(evaluation_data_file_path, "w") as file:
+    asyncio.run(process(data, file))
diff --git a/ClientAdvisor/AzureFunction/function_app.py b/ClientAdvisor/AzureFunction/function_app.py
index f9bfd8dc8..9f6368cdd 100644
--- a/ClientAdvisor/AzureFunction/function_app.py
+++ b/ClientAdvisor/AzureFunction/function_app.py
@@ -18,7 +18,6 @@
 from semantic_kernel.functions.kernel_function_decorator import kernel_function
 from semantic_kernel.kernel import Kernel
 import pymssql
-
 # Azure Function App
 app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS)
 
@@ -40,7 +39,7 @@ def greeting(self, input: Annotated[str, "the question"]) -> Annotated[str, "The
         client = openai.AzureOpenAI(
             azure_endpoint=endpoint,
             api_key=api_key,
-            api_version="2023-09-01-preview"
+            api_version=api_version
         )
         deployment = os.environ.get("AZURE_OPEN_AI_DEPLOYMENT_MODEL")
         try:
@@ -75,7 +74,7 @@ def get_SQL_Response(
         client = openai.AzureOpenAI(
             azure_endpoint=endpoint,
             api_key=api_key,
-            api_version="2023-09-01-preview"
+            api_version=api_version
         )
         deployment = os.environ.get("AZURE_OPEN_AI_DEPLOYMENT_MODEL")
 
@@ -100,6 +99,17 @@ def get_SQL_Response(
         Do not include assets values unless asked for.
         Always use ClientId = {clientid} in the query filter.
         Always return client name in the query.
+        If a question involves date and time, always use FORMAT(YourDateTimeColumn, 'yyyy-MM-dd HH:mm:ss') in the query.
+        If asked, provide information about client meetings according to the requested timeframe: give details about upcoming meetings if asked for "next" or "upcoming" meetings, and provide details about past meetings if asked for "previous" or "last" meetings including the scheduled time and don't filter with "LIMIT 1"  in the query.
+        If asked about the number of past meetings with this client, provide the count of records where the ConversationId is neither null nor an empty string and the EndTime is before the current date in the query.
+        If asked, provide information on the client's investment risk tolerance level in the query.
+        If asked, provide information on the client's portfolio performance in the query.
+        If asked, provide information about the client's top-performing investments in the query.
+        If asked, provide information about any recent changes in the client's investment allocations in the query.
+        If asked about the client's portfolio performance over the last quarter, calculate the total investment by summing the investment amounts where AssetDate is greater than or equal to the date from one quarter ago using DATEADD(QUARTER, -1, GETDATE()) in the query.
+        If asked about upcoming important dates or deadlines for the client, always ensure that StartTime is greater than the current date. Do not convert the formats of StartTime and EndTime and consistently provide the upcoming dates along with the scheduled times in the query.
+        To determine the asset value, sum the investment values for the most recent available date.  If asked for the asset types in the portfolio and the present of each, provide a list of each asset type with its most recent investment value.
+        If the user inquires about asset on a specific date ,sum the investment values for the specific date avoid summing values from all dates prior to the requested date.If asked for the asset types in the portfolio and the value of each for specific date , provide a list of each asset type with specific date investment value avoid summing values from all dates prior to the requested date.
         Only return the generated sql query. do not return anything else''' 
         try:
 
@@ -152,13 +162,16 @@ def get_answers_from_calltranscripts(
         client = openai.AzureOpenAI(
             azure_endpoint= endpoint, #f"{endpoint}/openai/deployments/{deployment}/extensions", 
             api_key=apikey, 
-            api_version="2024-02-01"
+            api_version=api_version
         )
 
         query = question
-        system_message = '''You are an assistant who provides wealth advisors with helpful information to prepare for client meetings. 
-        You have access to the client’s meeting call transcripts. 
-        You can use this information to answer questions about the clients'''
+        system_message = '''You are an assistant who provides wealth advisors with helpful information to prepare for client meetings and provide details on the call transcripts.
+        You have access to the client’s meetings and call transcripts
+        When asked about action items from previous meetings with the client, **ALWAYS provide information only for the most recent dates**.
+        Always return time in "HH:mm" format for the client in response.
+        If requested for call transcript(s), the response for each transcript should be summarized separately and Ensure all transcripts for the specified client are retrieved and format **must** follow as First Call Summary,Second Call Summary etc.
+        Your answer must **not** include any client identifiers or ids or numbers or ClientId in the final response.'''
 
         completion = client.chat.completions.create(
             model = deployment,
@@ -182,7 +195,6 @@ def get_answers_from_calltranscripts(
                         "parameters": {
                             "endpoint": search_endpoint,
                             "index_name": index_name,
-                            "semantic_configuration": "default",
                             "query_type": "vector_simple_hybrid", #"vector_semantic_hybrid"
                             "fields_mapping": {
                                 "content_fields_separator": "\n",
@@ -259,14 +271,20 @@ async def stream_openai_text(req: Request) -> StreamingResponse:
     settings.max_tokens = 800
     settings.temperature = 0
 
+    # Read the HTML file
+    with open("table.html", "r") as file:
+        html_content = file.read() 
+
     system_message = '''you are a helpful assistant to a wealth advisor. 
     Do not answer any questions not related to wealth advisors queries.
-    If the client name and client id do not match, only return - Please only ask questions about the selected client or select another client to inquire about their details. do not return any other information.
-    Only use the client name returned from database in the response.
+    **If the client name in the question does not match the selected client's name**, always return: "Please ask questions only about the selected client." Do not provide any other information.     
+    Always consider to give selected client full name only in response and do not use other example names also consider my client means currently selected client.
     If you cannot answer the question, always return - I cannot answer this question from the data available. Please rephrase or add more details.
     ** Remove any client identifiers or ids or numbers or ClientId in the final response.
+    Client name **must be** same  as retrieved from database.
     '''
-
+    system_message += html_content
+   
     user_query = query.replace('?',' ')
 
     user_query_prompt = f'''{user_query}. Always send clientId as {user_query.split(':::')[-1]} '''
@@ -280,4 +298,4 @@ async def stream_openai_text(req: Request) -> StreamingResponse:
         settings=settings
     )   
 
-    return StreamingResponse(stream_processor(sk_response), media_type="text/event-stream")
\ No newline at end of file
+    return StreamingResponse(stream_processor(sk_response), media_type="text/event-stream")
diff --git a/ClientAdvisor/AzureFunction/table.html b/ClientAdvisor/AzureFunction/table.html
new file mode 100644
index 000000000..51ded0bea
--- /dev/null
+++ b/ClientAdvisor/AzureFunction/table.html
@@ -0,0 +1,11 @@
+ <!-- Include the table here -->
+    <table style="border: 1px solid #C8C6C4; width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 1em; font-family: Segoe UI">
+        <tr>
+            <th style="background-color: #F3F2F1; padding: 12px 15px; border: 1px solid #ddd; text-align: left;">Header 1</th>
+            <th style="background-color: #F3F2F1; padding: 12px 15px; border: 1px solid #ddd; text-align: left;">Header 2</th>
+        </tr>
+        <tr>
+            <td style="padding: 12px 15px; border: 1px solid #ddd; text-align: left; color:#797775;">Data 1</td>
+            <td style="padding: 12px 15px; border: 1px solid #ddd; text-align: left; color:#797775;">Data 2</td>
+        </tr>
+    </table>
\ No newline at end of file
diff --git a/ClientAdvisor/Deployment/bicep/deploy_app_service.bicep b/ClientAdvisor/Deployment/bicep/deploy_app_service.bicep
index d2dbeb9a3..1b66e034b 100644
--- a/ClientAdvisor/Deployment/bicep/deploy_app_service.bicep
+++ b/ClientAdvisor/Deployment/bicep/deploy_app_service.bicep
@@ -172,7 +172,7 @@ param VITE_POWERBI_EMBED_URL string = ''
 
 // var WebAppImageName = 'DOCKER|ncwaappcontainerreg1.azurecr.io/ncqaappimage:v1.0.0'
 
-var WebAppImageName = 'DOCKER|bycwacontainerreg.azurecr.io/byc-wa-app:latest'
+var WebAppImageName = 'DOCKER|bycwacontainerreg.azurecr.io/byc-wa-app:dev'
 
 resource HostingPlan 'Microsoft.Web/serverfarms@2020-06-01' = {
   name: HostingPlanName
diff --git a/ClientAdvisor/Deployment/bicep/deploy_azure_function_script.bicep b/ClientAdvisor/Deployment/bicep/deploy_azure_function_script.bicep
index cdda63957..2ad7ff55e 100644
--- a/ClientAdvisor/Deployment/bicep/deploy_azure_function_script.bicep
+++ b/ClientAdvisor/Deployment/bicep/deploy_azure_function_script.bicep
@@ -17,6 +17,7 @@ param sqlDbName string
 param sqlDbUser string
 @secure()
 param sqlDbPwd string
+param functionAppVersion string
 
 resource deploy_azure_function 'Microsoft.Resources/deploymentScripts@2020-10-01' = {
   kind:'AzureCLI'
@@ -31,7 +32,7 @@ resource deploy_azure_function 'Microsoft.Resources/deploymentScripts@2020-10-01
   properties: {
     azCliVersion: '2.50.0'
     primaryScriptUri: '${baseUrl}Deployment/scripts/create_azure_functions.sh' // deploy-azure-synapse-pipelines.sh
-    arguments: '${solutionName} ${solutionLocation} ${resourceGroupName} ${baseUrl} ${azureOpenAIApiKey} ${azureOpenAIApiVersion} ${azureOpenAIEndpoint} ${azureSearchAdminKey} ${azureSearchServiceEndpoint} ${azureSearchIndex} ${sqlServerName} ${sqlDbName} ${sqlDbUser} ${sqlDbPwd}' // Specify any arguments for the script
+    arguments: '${solutionName} ${solutionLocation} ${resourceGroupName} ${baseUrl} ${azureOpenAIApiKey} ${azureOpenAIApiVersion} ${azureOpenAIEndpoint} ${azureSearchAdminKey} ${azureSearchServiceEndpoint} ${azureSearchIndex} ${sqlServerName} ${sqlDbName} ${sqlDbUser} ${sqlDbPwd} ${functionAppVersion}' // Specify any arguments for the script
     timeout: 'PT1H' // Specify the desired timeout duration
     retentionInterval: 'PT1H' // Specify the desired retention interval
     cleanupPreference:'OnSuccess'
diff --git a/ClientAdvisor/Deployment/bicep/main.bicep b/ClientAdvisor/Deployment/bicep/main.bicep
index cb99dc114..6c0f3a296 100644
--- a/ClientAdvisor/Deployment/bicep/main.bicep
+++ b/ClientAdvisor/Deployment/bicep/main.bicep
@@ -17,7 +17,8 @@ var resourceGroupName = resourceGroup().name
 // var subscriptionId  = subscription().subscriptionId
 
 var solutionLocation = resourceGroupLocation
-var baseUrl = 'https://raw.githubusercontent.com/microsoft/Build-your-own-copilot-Solution-Accelerator/main/ClientAdvisor/'
+var baseUrl = 'https://raw.githubusercontent.com/Roopan-Microsoft/psl-byo-main/main/ClientAdvisor/'
+var functionAppversion = 'dev'
 
 // ========== Managed Identity ========== //
 module managedIdentityModule 'deploy_managed_identity.bicep' = {
@@ -120,6 +121,7 @@ module azureFunctions 'deploy_azure_function_script.bicep' = {
     sqlDbPwd:sqlDBModule.outputs.sqlDbOutput.sqlDbPwd
     identity:managedIdentityModule.outputs.managedIdentityOutput.id
     baseUrl:baseUrl
+    functionAppVersion: functionAppversion
   }
   dependsOn:[storageAccountModule]
 }
diff --git a/ClientAdvisor/Deployment/bicep/main.json b/ClientAdvisor/Deployment/bicep/main.json
index dc3f5f855..6f50a220d 100644
--- a/ClientAdvisor/Deployment/bicep/main.json
+++ b/ClientAdvisor/Deployment/bicep/main.json
@@ -5,7 +5,7 @@
     "_generator": {
       "name": "bicep",
       "version": "0.29.47.4906",
-      "templateHash": "13616077515444443649"
+      "templateHash": "5062834210065422729"
     }
   },
   "parameters": {
@@ -28,7 +28,8 @@
     "resourceGroupLocation": "[resourceGroup().location]",
     "resourceGroupName": "[resourceGroup().name]",
     "solutionLocation": "[variables('resourceGroupLocation')]",
-    "baseUrl": "https://raw.githubusercontent.com/microsoft/Build-your-own-copilot-Solution-Accelerator/main/ClientAdvisor/"
+    "baseUrl": "https://raw.githubusercontent.com/Roopan-Microsoft/psl-byo-main/main/ClientAdvisor/",
+    "functionAppversion": "dev"
   },
   "resources": [
     {
@@ -1046,6 +1047,9 @@
           },
           "baseUrl": {
             "value": "[variables('baseUrl')]"
+          },
+          "functionAppVersion": {
+            "value": "[variables('functionAppversion')]"
           }
         },
         "template": {
@@ -1055,7 +1059,7 @@
             "_generator": {
               "name": "bicep",
               "version": "0.29.47.4906",
-              "templateHash": "3863583258880925565"
+              "templateHash": "12686893977991317957"
             }
           },
           "parameters": {
@@ -1106,6 +1110,9 @@
             },
             "sqlDbPwd": {
               "type": "securestring"
+            },
+            "functionAppVersion": {
+              "type": "string"
             }
           },
           "resources": [
@@ -1124,7 +1131,7 @@
               "properties": {
                 "azCliVersion": "2.50.0",
                 "primaryScriptUri": "[format('{0}Deployment/scripts/create_azure_functions.sh', parameters('baseUrl'))]",
-                "arguments": "[format('{0} {1} {2} {3} {4} {5} {6} {7} {8} {9} {10} {11} {12} {13}', parameters('solutionName'), parameters('solutionLocation'), parameters('resourceGroupName'), parameters('baseUrl'), parameters('azureOpenAIApiKey'), parameters('azureOpenAIApiVersion'), parameters('azureOpenAIEndpoint'), parameters('azureSearchAdminKey'), parameters('azureSearchServiceEndpoint'), parameters('azureSearchIndex'), parameters('sqlServerName'), parameters('sqlDbName'), parameters('sqlDbUser'), parameters('sqlDbPwd'))]",
+                "arguments": "[format('{0} {1} {2} {3} {4} {5} {6} {7} {8} {9} {10} {11} {12} {13} {14}', parameters('solutionName'), parameters('solutionLocation'), parameters('resourceGroupName'), parameters('baseUrl'), parameters('azureOpenAIApiKey'), parameters('azureOpenAIApiVersion'), parameters('azureOpenAIEndpoint'), parameters('azureSearchAdminKey'), parameters('azureSearchServiceEndpoint'), parameters('azureSearchIndex'), parameters('sqlServerName'), parameters('sqlDbName'), parameters('sqlDbUser'), parameters('sqlDbPwd'), parameters('functionAppVersion'))]",
                 "timeout": "PT1H",
                 "retentionInterval": "PT1H",
                 "cleanupPreference": "OnSuccess"
@@ -1992,7 +1999,7 @@
             "_generator": {
               "name": "bicep",
               "version": "0.29.47.4906",
-              "templateHash": "5513270017559796037"
+              "templateHash": "10803780472687780653"
             }
           },
           "parameters": {
@@ -2377,7 +2384,7 @@
             }
           },
           "variables": {
-            "WebAppImageName": "DOCKER|bycwacontainerreg.azurecr.io/byc-wa-app:latest"
+            "WebAppImageName": "DOCKER|bycwacontainerreg.azurecr.io/byc-wa-app:dev"
           },
           "resources": [
             {
diff --git a/ClientAdvisor/Deployment/scripts/create_azure_functions.sh b/ClientAdvisor/Deployment/scripts/create_azure_functions.sh
index 89f4d90ab..3d96ffe34 100644
--- a/ClientAdvisor/Deployment/scripts/create_azure_functions.sh
+++ b/ClientAdvisor/Deployment/scripts/create_azure_functions.sh
@@ -15,6 +15,7 @@ sqlServerName="${11}"
 sqlDbName="${12}"
 sqlDbUser="${13}"
 sqlDbPwd="${14}"
+functionAppVersion="${15}"
 
 azureOpenAIDeploymentModel="gpt-4"
 azureOpenAIEmbeddingDeployment="text-embedding-ada-002"
@@ -36,7 +37,7 @@ az storage account create --name $storageAccount --location eastus --resource-gr
 az functionapp create --resource-group $resourceGroupName --name $functionappname \
                 --environment $env_name --storage-account $storageAccount \
                 --functions-version 4 --runtime python \
-                --image bycwacontainerreg.azurecr.io/byc-wa-fn:latest
+                --image bycwacontainerreg.azurecr.io/byc-wa-fn:$functionAppVersion
 
 # Sleep for 120 seconds
 echo "Waiting for 120 seconds to ensure the Function App is properly created..."
diff --git a/ClientAdvisor/PowerBIReport/WealthAdvisor-Client360Report.pbix b/ClientAdvisor/PowerBIReport/WealthAdvisor-Client360Report.pbix
index 69c6ba92f..5bfefa923 100644
Binary files a/ClientAdvisor/PowerBIReport/WealthAdvisor-Client360Report.pbix and b/ClientAdvisor/PowerBIReport/WealthAdvisor-Client360Report.pbix differ
diff --git a/ClientAdvisor/README.md b/ClientAdvisor/README.md
index 949041e69..1b4e6f961 100644
--- a/ClientAdvisor/README.md
+++ b/ClientAdvisor/README.md
@@ -69,7 +69,7 @@ https://azure.microsoft.com/en-us/explore/global-infrastructure/products-by-regi
 
 2. Click the following deployment button to create the required resources for this accelerator in your Azure Subscription.
 
-   [![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fmicrosoft%2FBuild-your-own-copilot-Solution-Accelerator%2Fmain%2FClientAdvisor%2FDeployment%2Fbicep%2Fmain.json)
+   [![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FRoopan-Microsoft%2Frp0907%2Fmain%2FClientAdvisor%2FDeployment%2Fbicep%2Fmain.json)
 
 3. You will need to select an Azure Subscription, create/select a Resource group, Region, a unique Solution Prefix and an Azure location for Cosmos DB.
 
diff --git a/ResearchAssistant/Deployment/bicep/deploy_app_service.bicep b/ResearchAssistant/Deployment/bicep/deploy_app_service.bicep
index 69bc0c1ee..f733d9f0a 100644
--- a/ResearchAssistant/Deployment/bicep/deploy_app_service.bicep
+++ b/ResearchAssistant/Deployment/bicep/deploy_app_service.bicep
@@ -162,7 +162,7 @@ param AIStudioDraftFlowDeploymentName string = ''
 param AIStudioUse string = 'False'
 
 
-var WebAppImageName = 'DOCKER|byoaiacontainerreg.azurecr.io/byoaia-app:latest'
+var WebAppImageName = 'DOCKER|byoaiacontainerreg.azurecr.io/byoaia-app:dev'
 
 resource HostingPlan 'Microsoft.Web/serverfarms@2020-06-01' = {
   name: HostingPlanName
diff --git a/ResearchAssistant/Deployment/bicep/main.bicep b/ResearchAssistant/Deployment/bicep/main.bicep
index c81d19624..ea5f564c2 100644
--- a/ResearchAssistant/Deployment/bicep/main.bicep
+++ b/ResearchAssistant/Deployment/bicep/main.bicep
@@ -14,7 +14,7 @@ var resourceGroupName = resourceGroup().name
 var subscriptionId  = subscription().subscriptionId
 
 var solutionLocation = resourceGroupLocation
-var baseUrl = 'https://raw.githubusercontent.com/microsoft/Build-your-own-copilot-Solution-Accelerator/main/'
+var baseUrl = 'https://raw.githubusercontent.com/Roopan-Microsoft/Build-your-own-copilot-Solution-Accelerator/main/'
 
 // ========== Managed Identity ========== //
 module managedIdentityModule 'deploy_managed_identity.bicep' = {
diff --git a/ResearchAssistant/Deployment/bicep/main.json b/ResearchAssistant/Deployment/bicep/main.json
index 6d4cacd0c..a64e3bfd8 100644
--- a/ResearchAssistant/Deployment/bicep/main.json
+++ b/ResearchAssistant/Deployment/bicep/main.json
@@ -5,7 +5,7 @@
     "_generator": {
       "name": "bicep",
       "version": "0.29.47.4906",
-      "templateHash": "7163812400877459703"
+      "templateHash": "10711406236308727919"
     }
   },
   "parameters": {
@@ -23,7 +23,7 @@
     "resourceGroupName": "[resourceGroup().name]",
     "subscriptionId": "[subscription().subscriptionId]",
     "solutionLocation": "[variables('resourceGroupLocation')]",
-    "baseUrl": "https://raw.githubusercontent.com/microsoft/Build-your-own-copilot-Solution-Accelerator/main/"
+    "baseUrl": "https://raw.githubusercontent.com/Roopan-Microsoft/Build-your-own-copilot-Solution-Accelerator/main/"
   },
   "resources": [
     {
@@ -1508,7 +1508,7 @@
             "_generator": {
               "name": "bicep",
               "version": "0.29.47.4906",
-              "templateHash": "7109834445090495169"
+              "templateHash": "1558876662595106054"
             }
           },
           "parameters": {
@@ -1878,7 +1878,7 @@
             }
           },
           "variables": {
-            "WebAppImageName": "DOCKER|byoaiacontainerreg.azurecr.io/byoaia-app:latest"
+            "WebAppImageName": "DOCKER|byoaiacontainerreg.azurecr.io/byoaia-app:dev"
           },
           "resources": [
             {