fix(frontend): fix parser (#95)

* chore: update followup questions preliminary

* chore: update styles

* chore: restyle followup questions

* chore: fix parser for follow up questions (before TC)

* chore: fix bug and adapt styles

* chore: add margin to citations

* chore: remove commented regex

* fix: remove unnecessary regex and replace

* chore: update global config

* chore: add question icon

* chore: update styles

* chore: update comments to reflect decisions

* chore: refine cosmetic styles

* chore: replace icons with iconcloud set

* fix: fix minor bug with index replacement

* test: add E2E playwright tests for web app (#89)

* added initial test support for the playwright tests

* add snapshot and thought process test along with default network response

* playwright config update

* ux update

* test screenshot updates

* update tests

* no stream har files

* embed the body in the har files

* stream har file updated

* update the screenshot for response formatting

* add screenshots for firefox and webkit tests

* fix the testid attribute

* remove playwright workflow for now

* add the github action for running local tests and fix a broken test

* only upload artifacts on failure

* ensure playwright browsers are installed in devcontainer

* move the tests to a e2e

* update types

* keep playwright tests separate

* cleanup tests

* docs: update readme with auth info

* test: add load tests  (#93)

* setup env for k6

* test: load tests to package.json

* test: add tests

* test: add load test

* test: granualize metrics

* test: have a standard workload

* test: load 50 users 1 request/sec/user

* test: log the response failures

* test: randomize the iteration interval

* test: adjust the load scenario

* test: doc update

* test: move globals to shared esconfig

* test: add playwright test for ask interaction (#94)

* ci: disable playwright for demo

* ci: revert previous commit and disable from UI

---------

Co-authored-by: shibbas <26466942+shibbas@users.noreply.github.com>

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

@@ -1,17 +1,4 @@
 ## Icon sources
 
-All icons in this sample are free and open source
-
-- [Trash Can Icon](https://fontawesome.com/icons/trash?f=classic&s=solid)
-- [Send Icon](https://fontawesome.com/icons/paper-plane?f=classic&s=solid)
-- [Settings Icon](https://fontawesome.com/icons/cog?f=classic&s=solid)
-- [Close Icon](https://fontawesome.com/icons/times-circle?f=classic&s=solid)
-- [Info Icon](https://fontawesome.com/icons/info-circle?f=classic&s=solid)
-- [Copy Icon](https://fontawesome.com/icons/copy?f=classic&s=solid)
-- [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)
-
-## FontAwesome License
-
-For the full information and license, please visit [Font Awesome License](https://github.com/FortAwesome/Font-Awesome/blob/6.x/LICENSE.txt)
+All icons in this sample are part of the
+https://iconcloud.design/ icon set.

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