fix: Feature add-on - Chat returns - Research if we can display output data in a table format

.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}}"

.github/workflows/eslint.yml

@@ -0,0 +1,52 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+  schedule:
+    - cron: '43 7 * * 5'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install ESLint
+        run: |
+          npm install [email protected]
+          npm install @microsoft/[email protected]
+
+      - name: Run ESLint
+        env:
+          SARIF_ESLINT_IGNORE_SUPPRESSED: "true"
+        run: npx eslint .
+          --config .eslintrc.js
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v3
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true

.github/workflows/pylint.yml

@@ -0,0 +1,23 @@
+name: Pylint
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.8", "3.9", "3.10"]
+    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 pylint
+    - name: Analysing the code with pylint
+      run: |
+        pylint $(git ls-files '*.py')

ClientAdvisor/App/app.py

@@ -970,7 +970,8 @@ async def stream_chat_request(request_body, request_headers):
         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:
@@ -1549,12 +1550,12 @@ def get_users():
             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 (
@@ -1641,4 +1642,4 @@ def get_users():
         if conn:
             conn.close()
 
-app = create_app()
+app = create_app()

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
@@ -250,6 +251,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 })

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); 
   } 

ClientAdvisor/App/frontend/src/components/Cards/Cards.tsx

@@ -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 {

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;
+  }
+}

ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx

@@ -111,7 +111,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
         <StackItem>
           <Text
             role="heading"
-            aria-level={2}
+            aria-level={3}
             style={{
               alignSelf: 'center',
               fontWeight: '600',

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;
+  }
+}

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);
 }

ClientAdvisor/App/frontend/src/components/UserCard/UserCard.tsx

@@ -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>

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 {

ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css

@@ -35,7 +35,7 @@ html, body {
     0px 0px 2px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   overflow-y: auto;
-  max-height: calc(100vh - 300px);
+  max-height: calc(100vh - 240px);
   height: 100vh;
   width: 100%;
 }

ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx

@@ -751,7 +751,7 @@ 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">

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;
+  }
 }

ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx

@@ -52,6 +52,11 @@ const Layout = () => {
     fetchpbi()
   }, [])
 
+  const resetClientId= ()=>{
+    appStateContext?.dispatch({ type: 'RESET_CLIENT_ID' });
+    setSelectedUser(null);
+    setShowWelcomeCard(true);
+  }
 
   const closePopup = () => {
     setIsVisible(!isVisible);
@@ -157,7 +162,7 @@ const Layout = () => {
       />
       <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 +172,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,7 +217,7 @@ 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}/>
                 </PivotItem>

ClientAdvisor/App/frontend/src/state/AppProvider.tsx

@@ -51,7 +51,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,