feat: fix parser

packages/chat-component/public/svg/readme.md

@@ -11,6 +11,7 @@ All icons in this sample are free and open source
 - [Double Check Icon](https://fontawesome.com/icons/check-double?f=classic&s=solid)
 - [Email Icon](https://fontawesome.com/icons/envelope-open-text?f=classic&s=solid)
 - [Lightbulb Icon](https://fontawesome.com/icons/lightbulb?f=classic&s=solid)
+- [Question Icon](https://fontawesome.com/icons/circle-question?f=classic&s=solid)
 
 ## FontAwesome License
 

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

@@ -17,13 +17,15 @@ const globalConfig = {
   // This are the labels for the chat button and input
   CHAT_BUTTON_LABEL_TEXT: 'Ask Support',
   CHAT_INPUT_PLACEHOLDER: 'Type your question, eg. "How to search and book rentals?"',
-  USER_IS_BOT: 'Support Bot',
+  USER_IS_BOT: 'Support Assistant',
   RESET_BUTTON_LABEL_TEXT: 'X',
   RESET_BUTTON_TITLE_TEXT: 'Reset current question',
   RESET_CHAT_BUTTON_TITLE: 'Reset chat',
   // Copy response to clipboard
   COPY_RESPONSE_BUTTON_LABEL_TEXT: 'Copy Response',
   COPIED_SUCCESSFULLY_MESSAGE: 'Response copied!',
+  // Follow up questions text
+  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...',

packages/chat-component/src/core/parser/index.ts

@@ -17,6 +17,7 @@ export async function parseStreamedMessages({
   let isProcessingStep = false;
   let isLastStep = false;
   let isFollowupQuestion = false;
+  let followUpQuestionIndex = 0;
   let stepIndex = 0;
   let textBlockIndex = 0;
   const result = {
@@ -41,7 +42,7 @@ export async function parseStreamedMessages({
 
     // we use numeric values to identify the beginning of a step
     // if we match a number, store it in the buffer and move on to the next iteration
-    const LIST_ITEM_NUMBER = /(\d+)/;
+    const LIST_ITEM_NUMBER: RegExp = /(\d+)/;
     let matchedStepIndex = chunkValue.match(LIST_ITEM_NUMBER)?.[0];
     if (matchedStepIndex) {
       stepsBuffer.push(matchedStepIndex);
@@ -50,15 +51,31 @@ export async function parseStreamedMessages({
 
     // followup questions are marked either with the word 'Next Questions:' or '<<text>>' or both at the same time
     // these markers may be split across multiple chunks, so we need to buffer them!
-    // TODO: support followup questions wrapped in <<text>> markers
-    const matchedFollowupQuestionMarker = !isFollowupQuestion && chunkValue.includes('Next');
+    // TODO: remove all this logic from the frontend and implement a solution on the backend or with TypeChat
+    // we start by creating a buffer when we match the first marker
+    const matchedFollowupQuestionMarker =
+      (!isFollowupQuestion && chunkValue.includes('Next')) || chunkValue.includes('<<');
+    // once we do, we can assume that we are processing a followup question and set the flag to true
     if (matchedFollowupQuestionMarker) {
+      isFollowupQuestion = true;
       followupQuestionsBuffer.push(chunkValue);
       continue;
     } else if (followupQuestionsBuffer.length > 0 && chunkValue.includes('Question')) {
       isFollowupQuestion = true;
       followupQuestionsBuffer.push(chunkValue);
       continue;
+      // if we're already processing questions, we don't need to check for the marker again
+      // but we need to check if we reached the end of the followup questions
+    } else if (chunkValue.includes('<<') && isFollowupQuestion) {
+      isFollowupQuestion = true;
+      continue;
+      // this updates the index, so we add each question to a different array entry
+      // to simplify styling
+    } else if (chunkValue.includes('?>') || chunkValue.includes('>')) {
+      followUpQuestionIndex = followUpQuestionIndex + 1;
+      isFollowupQuestion = true;
+      continue;
+      // additional returns need to be removed, but only after we have processed the whole set of chunks
     } else if (isFollowupQuestion) {
       isFollowupQuestion = true;
       chunkValue = chunkValue.replace(/:?\n/, '');
@@ -87,18 +104,18 @@ export async function parseStreamedMessages({
 
     // if we are at the beginning of a step, we need to remove the step number and dot from the chunk value
     // we simply clear the current chunk value
-    if (matchedStepIndex || isProcessingStep) {
+    if (matchedStepIndex || isProcessingStep || isFollowupQuestion) {
       if (matchedStepIndex) {
         chunkValue = '';
       }
-
       // set the step index that is needed to update the correct step entry
       stepIndex = matchedStepIndex ? Number(matchedStepIndex) - 1 : stepIndex;
       updateFollowingStepOrFollowupQuestionEntry({
         chunkValue,
         textBlockIndex,
         stepIndex,
         isFollowupQuestion,
+        followUpQuestionIndex,
         chatThread,
       });
 
@@ -136,7 +153,7 @@ export function updateCitationsEntry({
   const updateCitationReference = (match, capture) => {
     const citation = citations.find((citation) => citation.text === capture);
     if (citation) {
-      return `<sup>[${citation.ref}]</sup>`;
+      return `<sup class="citation">${citation.ref}</sup>`;
     }
     return match;
   };
@@ -202,18 +219,20 @@ export function updateFollowingStepOrFollowupQuestionEntry({
   textBlockIndex,
   stepIndex,
   isFollowupQuestion,
+  followUpQuestionIndex,
   chatThread,
 }: {
   chunkValue: string;
   textBlockIndex: number;
   stepIndex: number;
   isFollowupQuestion: boolean;
+  followUpQuestionIndex: number;
   chatThread: ChatThreadEntry[];
 }) {
   // following steps and followup questions are treated the same way. They are just stored in different arrays
   const { followupQuestions, text: lastChatMessageTextEntry } = chatThread.at(-1) as ChatThreadEntry;
   if (isFollowupQuestion && followupQuestions) {
-    followupQuestions[stepIndex] = (followupQuestions[stepIndex] || '') + chunkValue;
+    followupQuestions[followUpQuestionIndex] = (followupQuestions[followUpQuestionIndex] || '') + chunkValue;
     return;
   }
 

packages/chat-component/src/main.ts

@@ -16,6 +16,7 @@ import iconDoubleCheck from '../public/svg/doublecheck-icon.svg?inline';
 import iconCopyToClipboard from '../public/svg/copy-icon.svg?inline';
 import iconSend from '../public/svg/send-icon.svg?inline';
 import iconClose from '../public/svg/close-icon.svg?inline';
+import iconQuestion from '../public/svg/question-icon.svg?inline';
 
 /**
  * A chat component that allows the user to ask questions and get answers from an API.
@@ -360,8 +361,7 @@ export class ChatComponent extends LitElement {
     // render citations
     if (citations && citations.length > 0) {
       return html`
-        <h3 class="subheadline--small">Citations</h3>
-        <ol class="items__list">
+        <ol class="items__list citations">
           ${citations.map(
             (citation) => html`
               <li class="items__listItem--citation">
@@ -383,23 +383,32 @@ export class ChatComponent extends LitElement {
   }
 
   renderFollowupQuestions(followupQuestions: string[] | undefined) {
+    // render followup questions
     if (followupQuestions && followupQuestions.length > 0) {
       return html`
-        <h3 class="subheadline--small">You may also want to ask...</h3>
-        <ol class="items__list followup">
-          ${followupQuestions.map(
-            (followupQuestion) => html`
-              <li class="items__listItem--followup">
-                <a
-                  class="items__link"
-                  href="#"
-                  @click="${(event: Event) => this.handleDefaultPromptClick(followupQuestion, event)}"
-                  >${followupQuestion}</a
-                >
-              </li>
-            `,
-          )}
-        </ol>
+        <div class="items__listWrapper">
+          <img
+            class="icon"
+            src="${iconQuestion}"
+            alt="${globalConfig.FOLLOW_UP_QUESTIONS_LABEL_TEXT}"
+            width="35"
+            height="35"
+          />
+          <ul class="items__list followup">
+            ${followupQuestions.map(
+              (followupQuestion) => html`
+                <li class="items__listItem--followup">
+                  <a
+                    class="items__link"
+                    href="#"
+                    @click="${(event: Event) => this.handleDefaultPromptClick(followupQuestion, event)}"
+                    >${followupQuestion}</a
+                  >
+                </li>
+              `,
+            )}
+          </ul>
+        </div>
       `;
     }
 
@@ -468,8 +477,8 @@ export class ChatComponent extends LitElement {
                                 </button>
                               </div>`}
                           ${message.text.map((textEntry) => this.renderTextEntry(textEntry))}
-                          ${this.renderFollowupQuestions(message.followupQuestions)}
                           ${this.renderCitation(message.citations)}
+                          ${this.renderFollowupQuestions(message.followupQuestions)}
                         </div>
                         <p class="chat__txt--info">
                           <span class="timestamp">${message.timestamp}</span>,