Merge branch 'main' into feat/voice-commands

packages/chat-component/src/config/global-config.js

@@ -11,7 +11,7 @@ const globalConfig = {
     'How to contact a representative?',
   ],
   DEFAULT_PROMPTS_HEADING_CHAT: 'Chat with our support team',
-  DEFAULT_PROMPTS_HEADING_ASK: 'Ask a question',
+  DEFAULT_PROMPTS_HEADING_ASK: 'Ask now',
   // This are the chat bubbles that will be displayed in the chat
   CHAT_MESSAGES: [],
   // This are the labels for the chat button and input
@@ -30,13 +30,14 @@ const globalConfig = {
   FOLLOW_UP_QUESTIONS_LABEL_TEXT: 'You can also ask...',
   SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT: 'Show thought process',
   HIDE_THOUGH_PROCESS_BUTTON_LABEL_TEXT: 'Hide thought process',
-  LOADING_INDICATOR_TEXT: 'Please wait. We are searching for an answer...',
+  LOADING_INDICATOR_TEXT: 'Please wait. We are searching and generating an answer...',
   // API ERROR HANDLING IN UI
   API_ERROR_MESSAGE: 'Sorry, we are having some problems. Please try again later.',
   // Config pertaining the response format
   THOUGHT_PROCESS_LABEL: 'Thought Process',
   SUPPORT_CONTEXT_LABEL: 'Support Context',
-  CITATIONS_LABEL: 'Citations',
+  CITATIONS_LABEL: 'Learn More:',
+  CITATIONS_TAB_LABEL: 'Citations',
 };
 
 const NEXT_QUESTION_INDICATOR = 'Next Questions:';

packages/chat-component/src/main.ts

@@ -18,10 +18,10 @@ import iconSuccess from '../public/svg/success-icon.svg?raw';
 import iconCopyToClipboard from '../public/svg/copy-icon.svg?raw';
 import iconSend from '../public/svg/send-icon.svg?raw';
 import iconClose from '../public/svg/close-icon.svg?raw';
-import iconQuestion from '../public/svg/question-icon.svg?raw';
 import iconMicOff from '../public/svg/mic-icon.svg?raw';
 import iconMicOn from '../public/svg/mic-record-on-icon.svg?raw';
-
+import iconQuestion from '../public/svg/bubblequestion-icon.svg?raw';
+import iconSpinner from '../public/svg/spinner-icon.svg?raw';
 import { marked } from 'marked';
 
 /**
@@ -167,6 +167,7 @@ export class ChatComponent extends LitElement {
         this.chatThoughts = result.thoughts;
         this.chatDataPoints = result.data_points;
         this.canShowThoughtProcess = true;
+
         return true;
       }
 
@@ -242,6 +243,7 @@ export class ChatComponent extends LitElement {
   handleDefaultPromptClick(question: string, event?: Event): void {
     event?.preventDefault();
     this.questionInput.value = DOMPurify.sanitize(question);
+    this.hideThoughtProcess(event!);
     this.currentQuestion = this.questionInput.value;
   }
 
@@ -455,11 +457,11 @@ export class ChatComponent extends LitElement {
     // render steps
     if (textEntry.followingSteps && textEntry.followingSteps.length > 0) {
       entries.push(
-        html` <ol class="items__list steps">
+        html` <ul class="items__list steps">
           ${textEntry.followingSteps.map(
             (followingStep) => html` <li class="items__listItem--step">${unsafeHTML(followingStep)}</li> `,
           )}
-        </ol>`,
+        </ul>`,
       );
     }
     // scroll to the bottom of the chat
@@ -472,6 +474,7 @@ export class ChatComponent extends LitElement {
     if (citations && citations.length > 0) {
       return html`
         <ol class="items__list citations">
+          <h3 class="subheadline--small">${globalConfig.CITATIONS_LABEL}</h3>
           ${citations.map(
             (citation) => html`
               <li class="items__listItem--citation">
@@ -593,20 +596,17 @@ export class ChatComponent extends LitElement {
                       `
                     : ''}
                 </ul>
-                <div class="chat__footer" id="chat-list-footer"></div>
+                <div class="chat__footer" id="chat-list-footer">
+                  <!-- Do not delete this element. It is used for auto-scrolling -->
+                </div>
               `
             : ''}
           ${this.isAwaitingResponse && !this.hasAPIError
             ? html`
-                <div
-                  id="loading-indicator"
-                  class="loading-skeleton"
-                  aria-label="${globalConfig.LOADING_INDICATOR_TEXT}"
-                >
-                  <div class="dot"></div>
-                  <div class="dot"></div>
-                  <div class="dot"></div>
-                </div>
+                <p class="loading-text" aria-label="${globalConfig.LOADING_INDICATOR_TEXT}">
+                  <span class="loading-icon">${unsafeSVG(iconSpinner)}</span>
+                  <span class="loading-label">${globalConfig.LOADING_INDICATOR_TEXT}</span>
+                </p>
               `
             : ''}
           <!-- Default prompts: use the variables above to edit the heading -->
@@ -632,7 +632,7 @@ export class ChatComponent extends LitElement {
                               @click="${(event: Event) => this.handleDefaultPromptClick(prompt, event)}"
                             >
                               ${prompt}
-                              <span class="defaults__span">Ask now</span>
+                              <span class="defaults__span">${globalConfig.DEFAULT_PROMPTS_HEADING_ASK}</span>
                             </a>
                           </li>
                         `,
@@ -760,9 +760,9 @@ export class ChatComponent extends LitElement {
                         aria-hidden="${this.selectedAsideTab !== 'tab-citations'}"
                         aria-controls="tabpanel-3"
                         @click="${(event: Event) => this.activateTab(event)}"
-                        title="${globalConfig.CITATIONS_LABEL}"
+                        title="${globalConfig.CITATIONS_TAB_LABEL}"
                       >
-                      ${globalConfig.CITATIONS_LABEL}
+                      ${globalConfig.CITATIONS_TAB_LABEL}
                       </a>
                     </li>
                   </ul>